Почему не останавливается интервал?

Question

[Dmytro Yurikov]

Не останавливается интервал после перехода чилса к нулю, что можно изменить что бы это исправить?

import './timer.css';
import { useState, useEffect } from 'react';
 
function Timer() {
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [endtime, setEndtime] = useState(0);
  const [timerInterval, setTimerInterval] = useState();

  useEffect(()=>{
    onPomodoro()
  },[])

  const setClock = () => {
    setTimerInterval(setInterval(() => {
      setEndtime((endtime) => {
        if(endtime <= 0){
          console.log('end')

          return 0
        }else{
          console.log(endtime-1000)
          updateClock(endtime-1000);
          return endtime-1000
        }
      }) 
      
    },1000))
  }
  function updateClock(endtime){
    const t = (Date.parse(new Date()) + endtime) - Date.parse(new Date());
    setMinutes(getZero(Math.floor((t/1000/60)%60)));
    setSeconds(getZero(Math.floor((t/1000)%60)));
  }
  
  function stopClock(){
    if(timerInterval) {
      clearInterval(timerInterval);
      setTimerInterval(0);
    }    
  }
  function getZero(num){ // добавляем нули к числу что бы было красиво
    if(num<0){
        return '00';
    }
    if(num >= 0 && num<10){
        return `0${num}`;
    }else{
        return num;
    }
  }

  const onPomodoro = () => {
    document.body.classList.remove("short", "long");
    document.body.classList.add("pomodoro");
    stopClock()
    updateClock(0)
    setEndtime(5000)
    updateClock(1500000)
  }

  const onShortBreak = () => {
    document.body.classList.remove("pomodoro", "long");
    document.body.classList.add("short");
    stopClock()
    updateClock(0)
    setEndtime(3000)  
    updateClock(300000) 
  }

  const onLongBreak = () => {
    document.body.classList.remove("short", "pomodoro");
    document.body.classList.add("long");
    stopClock()
    updateClock(0)
    setEndtime(900000)  
    updateClock(900000)   
  }
  
  function onPlay(){
    setClock()
  }

  function onPause(){
    stopClock()
  }

  return (
    <>
      <section className="timer">
        <div className="container">
            <div className="timer__navigation__btns">
                <button onClick={onPomodoro} className="timer__navigation-btn">Pomodoro</button>
                <button onClick={onShortBreak} className="timer__navigation-btn">Short-break</button>
                <button onClick={onLongBreak} className="timer__navigation-btn">long-break</button>
            </div>
            <div className="timer__blocks">
                <div className="timer__block">
                    <span id="minutes">{minutes}</span>
                </div>
                <div className="timer__dots">
                    :
                </div>
                <div className="timer__block">
                    <span id="seconds">{seconds}</span>
                </div>
            </div>
            <div className="timer__controller">
              <button onClick={onPlay} className="timer__controller-btn"><i className="fa-solid fa-play"></i></button>
              <button onClick={onPause} className="timer__controller-btn"><i className="fa-solid fa-pause"></i></button>
            </div>
        </div>
     </section>
    </>
  );
}

export default Timer;