Я бы взял и заюзал useEffect в useRef - это

самый правильный и простой способ должен быть.
и будет чет типа того
export default function App() {
const [count, setCount] = useState(0);
const [isCounting, setIsCounting] = useState(false);

const timer = useRef(null);

const toggleCounter = () => {
setIsCounting((state) => !state);
};

const resetCounter = () => {
setCount(0);
};

useEffect(() => {
if (isCounting) {
timer.current = setInterval(() => {
setCount((count) => count + 1);
}, 1000);
}

return () => {
clearInterval(timer.current);
};
}, [count, setCount, isCounting]);

return (
<>
<h1>{count}</h1>
<button onClick={toggleCounter}>
{!isCounting ? "Enable Counter" : "Disable Counter"}
</button>
<button disabled={isCounting} onClick={resetCounter}>
Reset
</button>
</>
);
}

спасибо большое за развернутый ответ) Я все равно не въезжаю в этот костыль функциональных компонентов, наверное нужно пару дней над ними посидеть и придет, возможно

ну я тоже сначала с классовыми дружил больше) пока рефакторил на функциональные бывало тупил жестко. потом будет наоборот. когда придет осознание. будешь писать функции с хуками и думать. как так жили на классах раньше и зачем?) ну у меня так по крайней мере)

Верю, так всегда