En mi código tengo algunos problemas con los intervalos. tengo una situacion asi

 import { useState } from 'react'; function App() { const [count, setCount] = useState(0); function handleClick() { const timer = setInterval(() => { if (count >= 10) { clearInterval(timer); } else { setCount((prevCount) => prevCount + 1); } }, 1000); } return ( <> <button onClick={handleClick}>start</button> <p>{count}</p> </> ); } export default App;

lo que intento hacer es iniciar un intervalo cuando el usuario hace clic en un botón y detenerlo cuando el contador llega a 10, pero nunca se detiene y el depurador dice que dentro setInterval recuento siempre es 0. ¿Alguien sabe cuál es el problema? También descubrí que si reescribo componente a componente de class como este

 class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } handleClick() { let myInterval = setInterval(() => { if (this.state.count >= 10) { clearInterval(myInterval); } else { this.setState((prevState) => ({ count: prevState.count + 1, })); } }, 1000); } render() { return ( <> <button onClick={this.handleClick.bind(this)}>start</button> <p>{this.state.count}</p> </> ); } }

funciona perfectamente
No sé lo que está pasando y me paso casi el día tratando de averiguarlo.
Entonces, ¿alguien sabe por qué functional el componente class y por qué no funciona el componente funcional?

Gracias por adelantado