I have the following ReactJS code:

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'));

When the app loads in the browser "Render" is outputted in the console. Then, when I click on the button, "Render" is outputted another time, and it makes sense because the state changes.

However, another click on the button, outputs "Render" again in the console :/ And after that when clicking on the button, no more outputs.

Can someone help me understand why this component is rendered on the second button click?

Thanks