Не обновляется состояние в useState(milliseconds)

Есть таймер, пропсами приходит дата, которую я конвертирую в миллисекунды записываю в переменную milliseconds и передаю в useState. Но эти данные не записываются в переменную timeRemaining, а остаются там прежние данные. Соответственно таймер не перерисовывается. перерисовывается только если я принудительно перезагружу страничку в браузере.

Подскажите почему?

const CountdownTimer = ({ startDate }) => {
  debugger

  const date = new Date(startDate).getTime()
  const now = new Date().getTime()
  const milliseconds = date - now;

  const [timeRemaining, setTimeRemaining] = useState(milliseconds);

  const countdown = () => {
    setTimeRemaining(time => {
      if (time > 0) {
        return time - 1000;
      }
      return time;
    });
  };


  useEffect(() => {
    if (timeRemaining <= 0) {
      return;
    }
    const timerId = setInterval(countdown, 1000);
    return () => clearInterval(timerId);
  }, [timeRemaining]);

  const formatTime = (time) => {
    const days = Math.floor(time / 86400000);
    const hours = Math.floor((time % 86400000) / 3600000);
    const minutes = Math.floor((time % 3600000) / 60000);
    const seconds = Math.floor((time % 60000) / 1000);

    return { days, hours, minutes, seconds };

на скрине видно, что данные приходят