Tengo una pequeña aplicación que está reproduciendo algunos audios cuando presiono reproducir y se detiene cuando presiono el botón nuevamente usando el estado isPlaying. La funcionalidad de reproducir/detener funciona bien, pero quiero agregar una barra de progreso para mostrar el progreso de la canción. Usé useEffect y un estado "completado" para que la barra de progreso muestre el progreso con estilo css. todo funciona, excepto que no puedo borrar el intervalo. Cuando presiono detener, la canción se detiene, pero la barra de progreso continúa, después de verificar, descubrí que clearInterval no funciona. Esta es mi función useEffect:

 const ProgressBar = ({isPlaying}) => { const [completed, setCompleted] = useState({ count: 0 }); useEffect(() => { if (isPlaying){ setInterval(() => { setCompleted(completed.count+=5.8) if(completed.count > 99) { setCompleted(completed.count=0); } }, 1000); } else { clearInterval() } }, [isPlaying]);

Traté de agregar:

 const intervalId = setInterval(() => { ...

y luego pase el ID de intervalo para borrar (Id de intervalo) pero luego necesito agregar la condición de - si (está jugando) antes de eso. y cuando lo hago, no puedo usar "else { clearInterval(intervalId)} porque IntervalId no está definido en el ámbito else. ¿Cómo puedo pasar eso y borrar el intervalo? Intenté varias formas que no funcionaron por alguna razón . ¡Cualquier ayuda sería apreciada!

Editado:

Intenté iniciar sesión en la consola solo para asegurarme de que el estado de reproducción obtuviera el cambio desde el interruptor de reproducción/detención, y funciona bien:

 useEffect(() => { if (isPlaying) { console.log("playing") } else { console.log("not playing") }

Tengo el componente "Panel de control", por lo que no puedo configurar la funcionalidad del componente ProgressBar con la funcionalidad de los botones:

 const ControlPanel = ({ setIsLooping, isLooping, isPlaying, setIsPlaying}) => { return ( <div> <PlayButton> {!isPlaying ? ( <button type="button" className="play" onClick={() => setIsPlaying(true)}> <ImPlay2></ImPlay2> Play </button> ) : ( <button type="button" className="pause" onClick={() => setIsPlaying(false)}> <ImStop></ImStop> Stop </button> )} </PlayButton> <Flex> .....