react_mystery.tsx

import { useState } from 'react'

function Child(props: { close: () => void }): JSX.Element {
    return (
        <button onClick={props.close}>click me to close</button>
    )
}

export default function Parent(): JSX.Element {
    // this doesn't work
    let [state, setState] = useState(false)
    let open = () => setState(true)
    // let close = () => setState(false)

    // but it does if you replace the definition of close with
    let close = () => window.setTimeout(() => setState(false), 0)

    return (
        <a onClick={open}>
            <p>click me to open</p>
            {state && <Child close={close} />}
        </a>
    )
}