I have two components Timer and Ambience sound player both in the main component , Since timer component use useState,useEffect when it re-renders the ambience sound component also reRender making the sound to play from the start

//timer logic

  const [time, setTime] = useState(1500); // 25 minutes in seconds
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let timer: any;
    if (isRunning) {
      timer = setInterval(() => {
        setTime((prevTime) => (prevTime > 0 ? prevTime - 1 : 0));
      }, 1000);
    } else if (!isRunning && time !== 0) {
      clearInterval(timer);
    }
    return () => clearInterval(timer);
  }, [isRunning, time]);

  const handleStartStop = () => {
    setIsRunning(!isRunning);
  };

 <Timer
   time={time}
   isRunning={isRunning}
   handleStartStop={handleStartStop}
   handleReset={handleReset}
   handleIncrement={handleIncrement}
   handleDecrement={handleDecrement}
/>
<AmbientComponent
   sounds={sounds}
   handlePlayStopSound={handlePlayStopSound}
   handleVolumeChange={handleVolumeChange}
/>