solved_by_atomic_state.tsx

import { useState } from 'react'

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

export default function Parent(): JSX.Element {
    // let [state, setState] = useState({ expanded: false })
    // let open = () => { setState({expanded: true }) }
    // let close = () => { setState({expanded: false }) }
    // let expanded = () => state.expanded

    let [state, setState] = useState(false)
    let open = () => { setState(!state) }
    let close = () => { setState(!state) }
    let expanded = () => state

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