Рабочий таймер выводит в первый рендер нули

У меня есть таймер на хуках. Который принимает секунды. И он работает, но проблема в том, что первый после рендера или при первой загрузки показываются нули, а через пару секунды появляется время.

const [seconds, setSeconds] = useState('00');
const [minutes, setMinutes] = useState('00');
const [hours, setHours] = useState('00');
const [x, setX] = useState(null);
const [ended, setEnded] = useState(false);

useEffect(() => {
    if(dl) {
        const x = setInterval(count,1000);
    }

    return () => {
        clearInterval(x);
    }
},[dl])

const count = () => {
    
    const now = new Date().getTime();
    const t = dl - now;
    const hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
    const minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)).toString();
    const seconds = Math.floor((t % (1000 * 60)) / 1000).toString();
    setMinutes(minutes);
    setHours(hours);
    setSeconds(seconds);
    if (t < 0 || typeof days == "number") {
        setEnded(true);
    }
}

            <div className="prelend-timer-item">
                {hours.padStart(2, 0).split('').map(n => (<span><i>{n}</i></span>))}
            </div>
            <div className={'prelend-timer-sep'}>:</div>
            <div className={'prelend-timer-item'}>
                {minutes.padStart(2, 0).split('').map(n => (<span><i>{n}</i></span>))}
            </div>
            <div className={'prelend-timer-sep'}>:</div>
            <div className={'prelend-timer-item'}>
                {seconds.padStart(2, 0).split('').map(n => (<span><i>{n}</i></span>))}
            </div>