Countdown react timer sets time to zero - reactjs

Question

The goal is to implement a timer with a start, pause/resume, and reset buttons and also with custom input for getting minutes and seconds.
As the requirement states, the timer should not change when tying the input field, the timer should change only when start button is pressed (it show set state only after start is pressed).
Code:
const START_DERATION = 10;
function Timer() {
const [min, setMin] = useState("00");
const [sec, setSec] = useState("00");
const [currentMinutes, setMinutes] = useState("00");
const [currentSeconds, setSeconds] = useState("00");
const [isStop, setIsStop] = useState(false);
const [duration, setDuration] = useState(START_DERATION);
const [isRunning, setIsRunning] = useState(false);
const formatTime = async () => {
setMinutes(min);
setSeconds(sec);
};
const startHandler = async () => {
setDuration(
parseInt(currentSeconds, 10) + 60 * parseInt(currentMinutes, 10)
);
setIsRunning(true);
};
const stopHandler = () => {
setIsStop(true);
setIsRunning(false);
};
const resetHandler = () => {
setMinutes("00");
setSeconds("00");
setIsRunning(false);
setIsStop(false);
setDuration(START_DERATION);
};
const resumeHandler = () => {
let newDuration =
parseInt(currentMinutes, 10) * 60 + parseInt(currentSeconds, 10);
setDuration(newDuration);
setIsRunning(true);
setIsStop(false);
};
const startAll = async () => {
await formatTime();
startHandler();
};
useEffect(() => {
if (isRunning === true) {
let timer = duration;
var minutes, seconds;
const interval = setInterval(function () {
if (--timer <= 0) {
resetHandler();
} else {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
setMinutes(minutes);
setSeconds(seconds);
}
}, 1000);
return () => clearInterval(interval);
}
}, [isRunning]);
useEffect(() => {
console.log(currentMinutes);
}, [currentMinutes]);
useEffect(() => {
console.log(currentSeconds);
}, [currentSeconds]);
return (
<div>
<span style={{ display: "flex" }}>
<input type="number" onChange={(e) => setMin(e.target.value + "")} />{" "}
<p>Minutes</p>
</span>
<span style={{ display: "flex" }}>
<input type="number" onChange={(e) => setSec(e.target.value + "")} />
<p>Seconds</p>
</span>
<button onClick={formatTime}>Format</button>
<button onClick={startAll}>Start</button>
<button
onClick={isStop ? resumeHandler : stopHandler}
disabled={!isRunning && !isStop}
>
Pause/Resume
</button>
<button onClick={resetHandler} disabled={!isRunning && !isStop}>
Reset
</button>
<p>
{currentMinutes}:{currentSeconds}
</p>
</div>
);
}
But in the above case, the timer is set to 0 when the start is pressed.
Codesandbox : https://codesandbox.io/s/lively-grass-6o50xx?file=/src/Timer.js