I have a countdown component, and when I pass it an it, it displays a countdown clock. This works as expected when the page is first loaded, but when I change the prop (an int) that is passed to the component, the clock doesn't reset. Any help would be greatly appreciated!

I'm using DaisyUI for the countdown CSS.

const SearchCountdown = ({ secondsRemaining}: {secondsRemaining: number;}) => {
  const [currentTime, setCurrentTime] = useState(
    new Date(secondsRemaining * 1000)
  );

  console.log(secondsRemaining, "secondsRemaining");
  // Initialize currentTime based on secondsRemaining

  useEffect(() => {
    if (currentTime.getTime() === 0) {
      return;
    }
    const interval = setInterval(() => {
      if (currentTime.getTime() !== 0) {
        setCurrentTime((prev) => {
          if (prev.getTime() <= 0) {
            clearInterval(interval);
            return new Date(0);
          }
          return new Date(prev.getTime() - 100);
        });
      }
    }, 100);
    return () => {
      clearInterval(interval);
    };
  }, [secondsRemaining]);

  return (
    <div className="flex flex-col justify-center items-center">
      <h1 className="text-2xl">Time Left </h1>
      <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
        <div className="flex flex-col">
          <span className="countdown font-mono text-5xl">
            <span
              style={
                { "--value": currentTime.getMinutes() } as React.CSSProperties
              }
              aria-live="polite"
            >
              {currentTime.getMinutes()}
            </span>
          </span>
          min
        </div>
        <div className="flex flex-col">
          <span className="countdown font-mono text-5xl">
            <span
              style={
                { "--value": currentTime.getSeconds() } as React.CSSProperties
              }
              aria-live="polite"
            >
              {currentTime.getSeconds()}
            </span>
          </span>
          sec
        </div>
      </div>
    </div>
  );
};