When we set an event handler for a function component, how does it access to function component local variables? because when the component was being rendered the local variables created and when it return the JSX code, the local variables removed. So how does the event handler in this code log c in the console when the c should not exist? The clickHandler function called after the component rendered.

function Sample() {
    let c = 0;
    const clickHandler = () => {
        console.log(c);
    }
    return <h2 onClick={clickHandler}>'Hello'</h2>
}
    export default Sample;