Tengo una cuenta regresiva, me gustaría que la cuenta regresiva transcurriera de 5 segundos a 0 y luego comenzara de nuevo, pero esta vez desde un momento diferente.

En términos más claros; Tengo 5 fases, mi temporizador pasará, el reloj comenzará en la fase 1, corriendo de 5 segundos a 0. Después de que el reloj llegue a cero, quiero establecer el estado en la etapa 2 y luego ejecutar el reloj de 6 segundos a 0 , luego configure el estado en la fase 3, ejecute el reloj de 7 a 0, luego la fase 4, ejecute de 8 a 0 y luego termine en la etapa 5 corriendo de 9 segundos a 0.

Esto es lo que he probado:

 const renderTime = ({ remainingTime }) => { if (remainingTime === 0) { return <div className="timer">Too late...</div>; } return ( <div className="timer"> { /* <div className="text">Remaining</div> */} <div className="value">{remainingTime}</div> { /* <div className="text">seconds</div> */} </div> ); }; const Timer = (props) => { const [ timer, setTimer ] = useState(5) const { remainingTime } = renderTime; const [stage, setStage] = useState(1) console.log(renderTime) // let text = document.querySelector('.value').innerText // console.log(text) const timerMap = { 2: 6, 3: 7, 4: 8, 5: 9 } const changeTimer = (timer, stage, setStage) => { while (stage >= 5) { if(timer === 0) { setStage(stage+1) setTimer(timerMap[stage]) } return timer } }; return ( <div className="App"> <div className="timer-wrapper"> <CountdownCircleTimer isPlaying duration={changeTimer(timer)} colors={["#004777", "#F7B801", "#A30000", "#A30000"]} colorsTime={[10, 6, 3, 0]} onComplete={() => ({ shouldRepeat: true, delay: 1 })} size={100} > {renderTime} </CountdownCircleTimer> </div> </div> ); };

Recibo el mensaje de error:

 Warning: Received NaN for the `strokeDashoffset` attribute. If this is expected, cast the value to a string.

Agradecería cualquier ayuda