How can I call "useSate(false)" in React from a nested component? I would like to close the sidebar when one of the sidebar items is clicked. For that I need to call the onclick function setOpen(true) from the parent component.

function SearchDropdown() {

    const [open, setOpen] = useState(false);

    return (
    <>
        <div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
        {open && <>
            <div className="searchBarDropdown"><SearchBar></SearchBar></div>
            <div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
        </>}
    </>
    );
}

function MenuSidebar() {

    const [open, setOpen] = useState(false);

    return (
    <>
        <div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
        {open && <>
            <div className="menuSidebar">
                <h3 className="backwardsSection" onClick={() => setOpen(false)}>