How to pause and restart a clock in React

Hello StackOverflow community.

I am just starting with learning react and I came across this challenge, where we have to display the current time, with a button to Pause/Restart the time. But the catch is on clicking the pause button it should pause the time, and again on clicking the button it should restart the clock from the same paused time.

Please note that the clock should start from the paused time and not the current time.

Below is my code.

import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const [pause, setPause] = useState(false);

  useEffect(() => {
    let timer = setInterval(() => {
      if (!pause) {
        setTime(new Date().toLocaleTimeString());
      }
    }, 1 * 1000);
    return () => clearInterval(timer);
  }, [pause]);

  return (
    <div className="m-2 p-2 flex">
      <h1 className="m-1 p-1">{time}</h1>
      <button
        className="m-1 p-2 bg-slate-200 rounded-lg shadow-lg font-semibold"
        onClick={() => setPause(!pause)}
      >
        {pause ? "Start" : "Pause"}
      </button>
    </div>
  );
}

export default App;

I am not able to get the logic on how to restart the clock from the paused time and not the current time.
Any help is appreciated.