Tengo el siguiente código ReactJS:

 import React, { useState } from 'react'; import { render } from 'react-dom'; export default function App() { console.log('Render'); const [isOpen, setIsOpen] = useState(false); const handleOpen = () => { setIsOpen(true); } return ( <div> <button onClick={handleOpen}>Click</button> </div> ); } render(<App />, document.getElementById('root'));

Cuando la aplicación se carga en el navegador, se muestra "Renderizar" en la consola. Luego, cuando hago clic en el botón, "Renderizar" se muestra otra vez y tiene sentido porque el estado cambia.

Sin embargo, otro clic en el botón, genera "Renderizar" nuevamente en la consola:/ Y después de eso, al hacer clic en el botón, no hay más resultados.

¿Puede alguien ayudarme a entender por qué este componente se procesa en el segundo clic del botón?

Gracias