title: How do I keep only one sidebar menu open at a time in react app?
body: <p>I have a Sidebar component with dropdowns. I want to be able to keep one menu open at a time and other sidebar menu to auto close.
  Here's is a sub-component of the sidebar below...</p>
  <pre><code> function General() {
    
  
    const [open, setOpen] = useState(false);
    const location = useLocation();
  
    const handleClick = () =&gt; {
      setOpen(!open);
    };
  
    return (
      &lt;Wrapper&gt;
        &lt;ListSubheader inset&gt;General&lt;/ListSubheader&gt;
        &lt;ListItem button  onClick={handleClick}&gt;
          &lt;ListItemIcon&gt;
            &lt;DashboardIcon /&gt;
          &lt;/ListItemIcon&gt;
          &lt;ListItemText primary=&quot;Dashboard&quot; /&gt;
          {open ? &lt;KeyboardArrowDownIcon /&gt; : &lt;ChevronRightIcon /&gt;}
        &lt;/ListItem&gt;
        &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
          &lt;List component=&quot;div&quot; disablePadding&gt;
            &lt;ListItem button&gt;
              &lt;div&gt;
                  &lt;h4 className=&quot;text&quot;&gt;Main Overview&lt;/h4&gt;
              &lt;/div&gt;
            &lt;/ListItem&gt;
          &lt;/List&gt;
        &lt;/Collapse&gt;
      &lt;/Wrapper&gt;
    );
  }
  
  
  </code></pre>
  <p>As it stands, all dropdown menu can all be open at a time. Here's a second sidebar sub-component below..</p>
  <pre><code>
  function Facility() {
    const dispatch = useDispatch();
   
  
    const [open, setOpen] = useState(false);
    const location = useLocation();
  
    const handleClick = () =&gt; {
      setOpen(!open);
    };
  
    return (
      &lt;Wrapper&gt;
        &lt;ListSubheader inset&gt;Accreditations&lt;/ListSubheader&gt;
        &lt;ListItem button onClick={handleClick}&gt;
          &lt;ListItemIcon&gt;
            &lt;HomeWorkOutlinedIcon /&gt;
          &lt;/ListItemIcon&gt;
          &lt;ListItemText primary=&quot;Facilities&quot; /&gt;
          {open ? &lt;KeyboardArrowDownIcon /&gt; : &lt;ChevronRightIcon /&gt;}
        &lt;/ListItem&gt;
        &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
          &lt;List component=&quot;div&quot; disablePadding&gt;
            &lt;ListItem button&gt;
              &lt;div&gt;
                
                  &lt;ListItemIcon className=&quot;icon-wrapper&quot;&gt;
                    &lt;HowToRegRoundedIcon className=&quot;icon&quot; /&gt;
                  &lt;/ListItemIcon&gt;
                  &lt;h4 &gt;Approved  Facilities&lt;/h4&gt;
               
              &lt;/div&gt;
            &lt;/ListItem&gt;
          &lt;/List&gt;
        &lt;/Collapse&gt;
      &lt;/Wrapper&gt;
    );
  }
  
  
  </code></pre>
  <p>How  can i create a ffunction  in parent Siebar component to keep only one sub-cmenu uopen at a time and othe menu closed</p>