Countdown page reload does not work properly

I downloaded and modified the countdown-to-new-years.html example by adding the stop function to display a message and a fix date time:

<html>
    <head>
        <link rel="stylesheet" href="../compiled/flipclock.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="../compiled/flipclock.js"></script>    
    </head>
    <body>
        <div class="clock" style="margin:2em;"></div>

        <div class="message"></div>
        <script type="text/javascript">
            var clock;

            $(document).ready(function() {

                // Grab the current date
                var currentDate = new Date();

                // Set some date in the future 
                var futureDate  = new Date(2022, 9, 21, 20, 45);

                // Calculate the difference in seconds between the future and current date
                var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

                // Instantiate a countdown FlipClock
                clock = $('.clock').FlipClock(diff, {
                    clockFace: 'DailyCounter',
                    countdown: true,
                    callbacks: {
                        stop: function() {
                            $('.message').html('The clock has stopped!');
                    }
                }
                });
            });
        </script>

    </body>
</html>

Issue: When the countdown ends, reload the page does not display 00:00:00:00. Instead, it displayed -1-1-1-11- 1

Thanks in advance.

objectivehtml / FlipClock

Countdown page reload does not work properly #423