Останавливать таймер на текущей цифре React.ts

//код таймера
import React from 'react'
interface State {
    timeMinus: any;
    seconds: any;
    minuts: any;
}
interface State2 {
    timePlus: any;
    seconds2: any;
    minuts2: any;
}
/* interface State3 {
    timeMinus: any;
    seconds: any;
    minuts: any;
} */
const MyTimer = ({ timeMinus, timePlus }) => {
    const [state, setState] = React.useState<State>({
        timeMinus,
        seconds: timeMinus - Math.floor((timeMinus - 1) / 60) * 60 - 1,
        minuts: Math.floor((timeMinus - 1) / 60),
    });
        const [state2, setState2] = React.useState<State2>({
            timePlus,
            seconds2: timePlus - Math.floor((timePlus + 1) / 60),
            minuts2: Math.floor((timePlus + 1) / 60),
        });
/*         const [state3, setState3] = React.useState<State3>({
        timeMinus,
        seconds: timeMinus - Math.floor((timeMinus)),
        minuts: Math.floor((timeMinus)),
        }); */
    /////
/*         function counter() {

    var timer = setInterval(function () {
    if (state.timeMinus && state2.timePlus === false) {
        clearInterval(timer);
        console.log("stopped");
    }
    });
    return state2.timePlus
    } */
    /////

    React.useEffect(() => {

            setTimeout(() => {
                if (state.timeMinus) {
                    setState({
                        timeMinus: state.timeMinus - 1,
                        minuts: Math.floor((state.timeMinus - 1) / 60),
                        seconds: state.timeMinus - Math.floor((state.timeMinus - 1) / 60) * 60 - 1,
                    });
                } else if (state.timeMinus === 0) {
                    setState2({
                        timePlus: state2.timePlus + 1,
                        minuts2: Math.floor((state2.timePlus + 1) / 60),
                        seconds2: state2.timePlus - Math.floor((state2.timePlus + 1) / 60) * 60 + 1,
                    });
                } else if (state.timeMinus && state2.timePlus === true) {
                    return clearTimeout(state.timeMinus && state2.timePlus)
                }
                /* else if (state.timeMinus && state2.timePlus === false) {
                    return clearss()
                } */
                    
            }, 1000)
/*  if (state.timeMinus && state2.timePlus === false) {
                    return clearss();
        }
                    function clearss () {
            clearTimeout (timerId);
        }  */

    }, [state.timeMinus, state2.timePlus,/* state3.timeMinus, *//* state3.timePlus */])
    

    return (
        <div>
            {state.timeMinus
                ? <h3>{`${state.minuts}: ${state.seconds <= 10 ? `0${state.seconds}` : state.seconds}`}</h3>
                : <h3
                    style={{
                    color: "red", 
                    display:"flex", 
                    alignItems: "right",
                    }}
                >{`- ${state2.minuts2}: ${state2.seconds2 < 10 ? `0${state2.seconds2}` : state2.seconds2}`}</h3>
            }
            {/* {!state.timeMinus || !state2.timePlus
                ? <h3>{`${state.minuts}: ${state.seconds <= 10 ? `0${state.seconds}` : state.seconds}`}</h3>
                : <h3
                    style={{
                    color: "red", 
                    display:"flex", 
                    alignItems: "right",
                    }}
                >{`- ${state2.minuts2}: ${state2.seconds2 < 10 ? `0${state2.seconds2}` : state2.seconds2}`}</h3>
            } */}
        </div>
            )
}

export default MyTimer