Two input field "minute" and "second" is given. The value of the "second" field can exceed 60. A stopwatch needs to be created starting from the above timings.

Eg. If the minute is 5 and the second is 30. The stopwatch will start from 5:30 and then it will go on until both minute and second become 0.

Eg. If the minute is 5 and the second is 90. The stopwatch will start from 6:30 and then it will go on until both minute and second become 0.

There will be three-button with the "RESET", "PAUSE/RESUME" and "START" buttons.

RESET will reset the stopwatch to the user-given field. PAUSE will pause the stopwatch and if clicked again it will resume it. START will start the stopwatch at the initial go.

I am finding it difficult to create such a timer. Please help.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [min, setMin] = useState(0);
  const [sec, setSec] = useState(0);
  const [pause, setPause] = useState(true);

  const totalSeconds = min * 60 + sec;

  function startTimer(duration, display) {
    if (pause === true) {
      var timer = duration,
        minutes,
        seconds;
      const interval = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        console.log(minutes + ":" + seconds);
        setMin(minutes);
        setSec(seconds);

        timer = timer - 1;
        if (timer < 0) {
          clearInterval(interval);
        }
      }, 1000);
    }
  }
  function pauseToggle() {
    setPause(!pause);
    console.log(pause);
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        <input
          type="number"
          value={min}
          onChange={(e) => setMin(e.target.value)}
        />
        <input
          type="number"
          value={sec}
          onChange={(e) => setSec(e.target.value)}
        />
      </div>
      <div>
        <button
          onClick={() => {
            startTimer(totalSeconds);
          }}
        >
          START
        </button>
        <button
          onClick={() => {
            pauseToggle();
          }}
        >
          PAUSE/RESUME
        </button>
        <button>RESET</button>
      </div>
      {min}:{sec}
    </div>
  );
}