تغییر نکردن مقدار State در React

سلام وقتتون بخیر
من میخوام یه تایمر طراحی کنم که سه تا دکمه داره Start, Stop, Reset
الان من چهار تا استیت تعریف کردم برای ساعت دقیقه ثانیه و اینکه آیا Timer شروع به حرکت کرده یا نه
الان من میخوام مقدار استیت ها رو تغییر بدم تغییر نمی کنه

import React, { useState } from 'react';

let interval;
const Timer = () => {
    const [hour, setHour] = useState(0);
    const [minute, setMinute] = useState(0);
    const [second, setSecond] = useState(0);
    const [isStart, setIsStart] = useState(false);

    const startTimer = () => {
        if (isStart === false) {
            setIsStart(true);

            interval = setInterval(() => {
                setSecond(second + 1)

                if(second === 60) {
                    setSecond(0);
                    setMinute(minute + 1);
                };
                if(minute === 60) {
                    setMinute(0);
                    setHour(hour + 1);
                };
                console.log(`${hour} : ${minute} : ${second}`, isStart);
            }, 100);
        };
    };
    const stopTimer = () => {};
    const resetTimer = () => {};

    return(
        <>
            <h4 className="bg-slate-800 rounded-lg px-4 py-3 font-semibold text-base sm:text-lg text-center text-white animate-pulse cursor-pointer">
                {`${hour} : ${minute} : ${second}`}
            </h4>
            <div className="mt-5">
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Start" onClick={startTimer}>Start</button>
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Stop" onClick={stopTimer}>Stop</button>
                <button type="button" className="bg-slate-800 text-white text-sm px-4 py-2 rounded-md focus:ring-4 ring-indigo-800 mr-2 shadow-sm shadow-slate-700 hover:shadow-md select-none" title="Reset" onClick={resetTimer}>Reset</button>
            </div>
        </>
    );
};

export default Timer;

یه لاگ گرفتم داخل interval میخواستم ببینم تغییر می کنه یا نه که نتیجش اینه

ممنون میشم راهنماییم کنید