Как исправить баг по загрузке страницы (таймера)?

$(document).ready(function() {


  function timer() {


    if ($('.timer').length > 0) {
      // конечная дата
      const timerData = $('.timer__wrap').attr('data-time');

      const [day, month, year, hours, minutes] = timerData.replace(/[:.-]/g, ' ').split(' ');

      const deadline = new Date(year, month - 1, day, hours, minutes);
      // id таймера
      let timerId = null;

      // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
      function countdownTimer() {
        const diff = deadline - new Date();
        if (diff <= 0) {
        alert('time is over');
          clearInterval(timerId);
        }
        const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
        const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
        const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
        const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
        $days.text(days < 10 ? '0' + days : days);
        $hours.text(hours < 10 ? '0' + hours : hours);
        $minutes.text(minutes < 10 ? '0' + minutes : minutes);
        $seconds.text(seconds < 10 ? '0' + seconds : seconds);

        //убираем лишние нули
        $days.css("display", days ? "block" : "none");
        $hours.css("display", days || hours ? "block" : "none");
        $minutes.css("display", days || hours || minutes ? "block" : "none");
      }
      // получаем элементы, содержащие компоненты даты
      const $days = $('.timer__days');
      const $hours = $('.timer__hours');
      const $minutes = $('.timer__minutes');
      const $seconds = $('.timer__seconds');
      // вызываем функцию countdownTimer
      countdownTimer();
      // вызываем функцию countdownTimer каждую секунду
      timerId = setInterval(countdownTimer, 1000);
    }
  }

  timer();
  
  });

/*.timer__name {
  font-size: clamp(16px, 10vw, 230px);
  line-height: 1;
  color: #080400;
  background-color: #dbae2e;
  text-transform: uppercase;
  text-align: center;
  padding: 16px 10px;
  padding-bottom: 26px;
  font-weight: 600;
}*/

.timer__wrap {
  background-color: #593d91;
  padding: 28px 10px;
}

.timer__holder {
  display: flex;
  justify-content: center;
  align-items: center;
}

.timer__item {
 // font-size: clamp(140px, 10vw, 230px);
 font-size: 50px;
  line-height: 1;
  color: #dbae2e;
  text-align: center;
  font-weight: 700;
  font-family: Technology;
}

.timer__item:not(:last-child) {
  position: relative;
  padding-right: 40px;
}

.timer__item:not(:last-child):after {
  position: absolute;
  content: ':';
  right: 18%;
  color: #dbae2e;
}


body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  color: #363636;
  background-color: transparent;
  font-size: 16px;
  line-height: 1.2;
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

*::after,
*::before {
  box-sizing: border-box;
}

<section class="timer">
    <!--<p class="timer__name">Константин</p>-->
      <div class="timer__wrap" data-time="04.11.2021 22:58">
       <div class="timer__holder">
          <div class="timer__item timer__days">00</div>
          <div class="timer__item timer__hours">00</div>
          <div class="timer__item timer__minutes">00</div>
          <div class="timer__item timer__seconds">00</div>
       </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>