import "./styles.css"; import { useState, useEffect } from "react"; export default function App() { const [timerHours, setTimerHours] = useState('00'); const [timerMinutes, setTimerMinutes] = useState('00'); const [timerSeconds, setTimerSeconds] = useState('00'); const startTimer = (duration) => { setInterval(() => { var seconds = Math.floor((duration / 1000) % 60), minutes = Math.floor((duration / (1000 * 60)) % 60), hours = Math.floor((duration / (1000 * 60 * 60)) % 24); hours = (hours < 10) ? "0" + hours : hours; minutes = (minutes < 10) ? "0" + minutes : minutes; seconds = (seconds < 10) ? "0" + seconds : seconds; if (hours === 0 && minutes === 0) { clearInterval(); } else { setTimerHours(hours); setTimerMinutes(minutes); setTimerSeconds(seconds); } }, 1000) } useEffect(() => { startTimer(80214523); return () => { clearInterval() } }); return ( <div className="App"> {timerHours} : {timerMinutes} : {timerSeconds} </div> ); }

estructura de código como esta. No hay problema para obtener la información de hora, minuto y segundo. La cuenta regresiva no funciona.

Ejemplo: https://codesandbox.io/s/zealous-aryabhata-r1dwo?file=/src/App.js:0-1101