IF Else statement not properly worked in setInterval() function while creating count-down timer

Even after adding if else statment inside setInterval() function to clear the interval once my time variable reaches 0, the setInterval() is still running with negative time value.

Please specify what the problem is and provide some solution for the same.

Here is my code for count-down timer component:

import { useEffect, useState, useRef } from "react";

export const Timer = () => {
  const [time, setTime] = useState(10000);
  const [pause, setPause] = useState(false);
  let timerRef = useRef(null);

  useEffect(() => {  
    startTimer();
  
    return () => clearInterval(timerRef.current);
  }, []);

  const stopTimer = () => {
    clearInterval(timerRef.current);
    setPause(true);
  };

  const startTimer = () => {
    setPause(false);
    timerRef.current = setInterval(() => {
      if (time <= 0) {
        clearInterval(timerRef.current);
        setPause(true);
      }
      else{
        setTime((prevTime) => prevTime - 1000);
      }
    }, 1000);

  };

  const getFormattedText = (time) => {
    const SECONDS = 1000;
    const MINUTES = 60 * SECONDS;
    const HOURS = 60 * MINUTES;
    const DAYS = 24 * HOURS;

    const days = Math.floor(time / DAYS);
    const hours = Math.floor((time % DAYS) / HOURS);
    const minutes = Math.floor((time % HOURS) / MINUTES);
    const seconds = Math.floor((time % MINUTES) / SECONDS);

    return (
      <div className="countdown-timer">
        {days < 10 ? `0${days}` : days} : {hours < 10 ? `0${hours}` : hours} :{" "}
        {minutes < 10 ? `0${minutes}` : minutes} :{" "}
        {seconds < 10 ? `0${seconds}` : seconds}
      </div>
    );
  };
  return (
    <>
      {getFormattedText(time)}
      <div>
        <button onClick={pause ? startTimer : stopTimer}>
          {!pause ? "Stop" : "Start"} Timer
        </button>
      </div>
    </>
  );
};

export default Timer;

Here is the output after 0 second:

This is the link for Output’s image