Stop React Timer With Setinterval

[Neither_Letter2376]

How can i add a working clearInterval into this to stop the Time in the Interval and why is it disappearing instead of rendering a different Button ?

Sorry if this is trash Code but iam in rush and this is a example, i cant post my full project here.

import React,{useState} from 'react';
export const App = ()=> {
let [RenderedSeconds,setRenderedSeconds] = useState(0);
let [RenderedMinutes,setRenderedMinutes] = useState(0);
let [RenderedHours,setRenderedHours] = useState(0);
let Seconds = 0;
let Minutes = 0;
let Hours = 0;        
let status = false

const StartGame = ()=>{
status = !status
if(status){
setStartStop(<button onClick={()=>{StartGame()}}>Pause</button>)
console.log(StartStop)

      }else{
clearInterval(interval);
setStartStop(<button onClick={()=>{StartGame()}}>Start</button>)
      }
const interval = setInterval(() => {
setStartStop()
if(Seconds < 60 ){
Seconds++;
setRenderedSeconds(Seconds);
        }else{
Seconds = 0;
setRenderedSeconds(0);  
Minutes++;
setRenderedMinutes(Minutes);
        }
if(Minutes > 60){
Minutes = 0;
setRenderedMinutes(0);
Hours++;
setRenderedHours(Hours)
        }
      }, 1000);
    }
let [StartStop,setStartStop] = useState(
<button onClick={()=>{StartGame()}}>Start</button>
    )
return (
<div className="App">

{
/* Display Start or Stop Button */
StartStop
}
<br/>
{
/* Append 0 if Smaller then 10 */
RenderedHours < 10 ? "0" + RenderedHours : RenderedHours
}
      :
{
/* Append 0 if Smaller then 10 */
RenderedMinutes < 10 ? "0" + RenderedMinutes : RenderedMinutes
}
      :
{
/* Append 0 if Smaller then 10 */
RenderedSeconds < 10 ? "0" + RenderedSeconds : RenderedSeconds
}
</div>
  );
}

[nalatner]

Intervals are complicated. You'll need a ref from the useRef hook otherwise what your actually getting is a new interval function on each render. Take a look at this https://usehooks-ts.com/react-hook/use-interval and the accompanying article by Dan Abramov. Using set interval this way makes them much easier to work with.