Obtengo la propiedad endDate de una tienda redux y estoy seguro de que la propiedad no es nula o indefinida, pero nuevamente el estado mantiene el valor mostrado anteriormente hasta que se actualiza la página. Quiero que la página establezca automáticamente el estado de timeLeft en millisecondsToTime(now, endDate) de forma predeterminada, pero actualmente falla, a pesar de que funciona después de recargar.

 import React, { FC, useEffect, useState } from "react"; import { millisecondsToTime } from "src/utils/helpers"; import { StyledCountdownTimer, StyledTimeBox, StyledTimeBoxNumbers, StyledTimeBoxText } from "./StyledCountdownTimer"; import { getActiveCampaign } from "../../reduxStore"; export interface CountdownTimerProps { endDate?: string; } const CountdownTimer: FC<CountdownTimerProps> = ({ endDate }) => { const now = Date.now(); const [timeLeft, setTimeLeft] = useState(millisecondsToTime(now, endDate)); const data = getActiveCampaign(); console.log(data); useEffect(() => { const timer = setTimeout(() => { setTimeLeft(millisecondsToTime(now, endDate)); }, 1000); if (timeLeft.finished) { clearTimeout(timer); } return () => { clearTimeout(timer); }; }, [endDate, now, timeLeft.finished]); return ( <StyledCountdownTimer> {endDate} {timeLeft.days} {millisecondsToTime(now, endDate).days} <StyledTimeBox> <StyledTimeBoxNumbers>{timeLeft.days}</StyledTimeBoxNumbers> <StyledTimeBoxText>Days</StyledTimeBoxText> </StyledTimeBox> <StyledTimeBox> <StyledTimeBoxNumbers>{timeLeft.hours}</StyledTimeBoxNumbers> <StyledTimeBoxText>Hours</StyledTimeBoxText> </StyledTimeBox> <StyledTimeBox> <StyledTimeBoxNumbers>{timeLeft.minutes}</StyledTimeBoxNumbers> <StyledTimeBoxText></StyledTimeBoxText> </StyledTimeBox> <StyledTimeBox> <StyledTimeBoxNumbers>{timeLeft.seconds}</StyledTimeBoxNumbers> <StyledTimeBoxText>Seconds</StyledTimeBoxText> </StyledTimeBox> </StyledCountdownTimer> ); }; export { CountdownTimer };