Why is my setstate function causing other functions to malfunction in react.js?

const [lap, setLap] = useState([]);

function start(){
       if(!isStart){
            starting = Date.now() - elapsed;
            isStart = true;
            timer = setInterval(update, 1000);  
            console.log("timer is activated");
    }
}

 function stop(){
        if(isStart){
            isStart = false;
            clearInterval(timer);
    }
}

function reset(){
        isStart = false;
        elapsed = 0;
        document.getElementById("time").textContent = "00:00:00";
        clearInterval(timer);
        starting = 0;
    }
}

function update(){
        var curr = Date.now();
        elapsed = curr - starting;
        var min = Math.floor(elapsed/(1000*60));
        var sec = Math.floor((elapsed/1000)%60);
        var msec = Math.floor((elapsed%1000)/10);
        var time = [min, sec, msec]
        time = time.map((element) => pad(element));
        var time_str = time[0] + ":" + time[1] + ":" + time[2];
        document.getElementById("time").textContent = time_str;
        console.log(time_str)
    }

const lap_update = (val) => {
        setLap(lap => [...lap, val]);
    }

<div id="lap" onClick={() => lap_update(document.getElementById("time").textContent)}>LAP</div>

The above are the code snippets for a Stopwatch is lap functionality.

Unfortunately, my lap_update function when clicked, is causing the start/stop/reset functions to malfunction.

(Stop function and reset function not working, and start function is double rendering).

I really am not able to understand why, and what changes are needed in the setLap statment.

Please help!

Trying to figure out the issue with the setLap statement which is causing the other functions to malfunction (till Lap function is called, the program is running fine).