title: React/Material UI Drawer With Nested List Items Closes on Click
body: <p>I am using Material-UI for my React project and having issues with getting the drawer to function properly when I add in nested list items. Everything was working great until I added those in. I believe the root cause is that by clicking on the dropdown menu and changing the state of the list item to be open I'm causing the application to re-render. Not sure how to solve this.</p>
  <p><strong>Problem:</strong> Nested list items close the drawer automatically when you click the top level. The user then has to open the drawer again to see the list items in the drop down.</p>
  <p><strong>Desired Functionality:</strong> The user clicks the menu item to open the drawer. The user can click on &quot;Leadership Triad&quot; and see the menu items within while the drawer stays open. When the user clicks off, the drawer closes.</p>
  <p><strong>Code Sandbox</strong>
  <a href="https://codesandbox.io/s/material-ui-nested-menu-forked-qqdiv" rel="nofollow noreferrer">https://codesandbox.io/s/material-ui-nested-menu-forked-qqdiv</a></p>
  <p><strong>My Code</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import AppBar from &quot;@material-ui/core/AppBar&quot;;
  import Toolbar from &quot;@material-ui/core/Toolbar&quot;;
  import Typography from &quot;@material-ui/core/Typography&quot;;
  import IconButton from &quot;@material-ui/core/IconButton&quot;;
  import MenuIcon from &quot;@material-ui/icons/Menu&quot;;
  import Drawer from &quot;@material-ui/core/Drawer&quot;;
  import List from &quot;@material-ui/core/List&quot;;
  import Divider from &quot;@material-ui/core/Divider&quot;;
  import ListItem from &quot;@material-ui/core/ListItem&quot;;
  import ListItemIcon from &quot;@material-ui/core/ListItemIcon&quot;;
  import ListItemText from &quot;@material-ui/core/ListItemText&quot;;
  import InboxIcon from &quot;@material-ui/icons/MoveToInbox&quot;;
  import HomeIcon from &quot;@material-ui/icons/Home&quot;;
  import AccountCircle from &quot;@material-ui/icons/AccountCircle&quot;;
  import ExitToAppIcon from &quot;@material-ui/icons/ExitToApp&quot;;
  import ExpandLess from &quot;@material-ui/icons/ExpandLess&quot;;
  import ExpandMore from &quot;@material-ui/icons/ExpandMore&quot;;
  import PeopleIcon from &quot;@material-ui/icons/People&quot;;
  import BusinessIcon from &quot;@material-ui/icons/Business&quot;;
  import Menu from &quot;@material-ui/core/Menu&quot;;
  import MenuItem from &quot;@material-ui/core/MenuItem&quot;;
  import { Link as RouterLink } from &quot;react-router-dom&quot;;
  import Collapse from &quot;@material-ui/core/Collapse&quot;;
  
  const useStyles = makeStyles(theme =&gt; ({
      root: { flexGrow: 1 },
      menuButton: { marginRight: theme.spacing(2) },
      title: { flexGrow: 1 },
      list: { width: 250 },
      nested: { paddingLeft: theme.spacing(4) },
  }));
  
  const Header = () =&gt; {
      const [drawerOpen, setDrawerOpen] = useState(false);
      const [anchorEl, setAnchorEl] = useState(null);
  
      const [leadershipTriadMenuOpen, setLeadershipTriadMenuOpen] = useState(false);
  
      const handleLeadershipTriadClick = () =&gt; {
          setLeadershipTriadMenuOpen(!leadershipTriadMenuOpen);
      };
  
      const handleClick = event =&gt; {
          setAnchorEl(event.currentTarget);
      };
  
      const handleClose = () =&gt; {
          setAnchorEl(null);
      };
  
      const toggleDrawer = () =&gt; {
          setDrawerOpen(!drawerOpen);
      };
      const classes = useStyles();
      return (
          &lt;div className={classes.root}&gt;
              &lt;AppBar position=&quot;static&quot;&gt;
                  &lt;Toolbar&gt;
                      &lt;IconButton
                          edge=&quot;start&quot;
                          className={classes.menuButton}
                          color=&quot;inherit&quot;
                          aria-label=&quot;menu&quot;
                          onClick={() =&gt; toggleDrawer()}
                      &gt;
                          &lt;MenuIcon /&gt;
                          &lt;Drawer
                              anchor=&quot;left&quot;
                              open={drawerOpen}
                              onClose={() =&gt; toggleDrawer()}
                          &gt;
                              &lt;div className={classes.list}&gt;
                                  &lt;List&gt;
                                      &lt;ListItem button component={RouterLink} to=&quot;/&quot;&gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;HomeIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Home&quot; /&gt;
                                      &lt;/ListItem&gt;
                                      &lt;ListItem
                                          button
                                          onClick={() =&gt; handleLeadershipTriadClick()}
                                      &gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;HomeIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Leadership Triad&quot; /&gt;
                                          {leadershipTriadMenuOpen ? (
                                              &lt;ExpandLess /&gt;
                                          ) : (
                                              &lt;ExpandMore /&gt;
                                          )}
                                      &lt;/ListItem&gt;
                                      &lt;Collapse
                                          in={leadershipTriadMenuOpen}
                                          timeout=&quot;auto&quot;
                                          unmountOnExit
                                      &gt;
                                          &lt;List component=&quot;div&quot; disablePadding&gt;
                                              &lt;ListItem button className={classes.nested}&gt;
                                                  &lt;ListItemIcon&gt;
                                                      &lt;HomeIcon /&gt;
                                                  &lt;/ListItemIcon&gt;
                                              &lt;/ListItem&gt;
                                          &lt;/List&gt;
                                      &lt;/Collapse&gt;
                                      &lt;ListItem button&gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;InboxIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Testing&quot; /&gt;
                                      &lt;/ListItem&gt;
                                      &lt;ListItem button&gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;InboxIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Testing&quot; /&gt;
                                      &lt;/ListItem&gt;
                                  &lt;/List&gt;
                                  &lt;Divider /&gt;
                                  &lt;List&gt;
                                      &lt;ListItem
                                          button
                                          component={RouterLink}
                                          to=&quot;/admin/companies&quot;
                                      &gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;BusinessIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Companies&quot; /&gt;
                                      &lt;/ListItem&gt;
                                      &lt;ListItem
                                          button
                                          component={RouterLink}
                                          to=&quot;/admin/users&quot;
                                      &gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;PeopleIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Users&quot; /&gt;
                                      &lt;/ListItem&gt;
                                  &lt;/List&gt;
                                  &lt;Divider /&gt;
                                  &lt;List&gt;
                                      &lt;ListItem button component={RouterLink} to=&quot;/profile&quot;&gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;AccountCircle color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Profile&quot; /&gt;
                                      &lt;/ListItem&gt;
                                      &lt;ListItem button component={RouterLink} to=&quot;/logout&quot;&gt;
                                          &lt;ListItemIcon&gt;
                                              &lt;ExitToAppIcon color=&quot;primary&quot; /&gt;
                                          &lt;/ListItemIcon&gt;
                                          &lt;ListItemText primary=&quot;Logout&quot; /&gt;
                                      &lt;/ListItem&gt;
                                  &lt;/List&gt;
                              &lt;/div&gt;
                          &lt;/Drawer&gt;
                      &lt;/IconButton&gt;
                      &lt;Typography variant=&quot;h6&quot; className={classes.title}&gt;
                          Leadership Program
                      &lt;/Typography&gt;
                      &lt;IconButton color=&quot;inherit&quot; onClick={handleClick}&gt;
                          &lt;AccountCircle /&gt;
                      &lt;/IconButton&gt;
                      &lt;Menu
                          id=&quot;admin-menu&quot;
                          anchorEl={anchorEl}
                          keepMounted
                          open={Boolean(anchorEl)}
                          onClose={handleClose}
                      &gt;
                          &lt;MenuItem
                              component={RouterLink}
                              to=&quot;/profile&quot;
                              onClick={handleClose}
                          &gt;
                              Profile
                          &lt;/MenuItem&gt;
                          &lt;MenuItem
                              onClick={handleClose}
                              component={RouterLink}
                              to=&quot;/logout&quot;
                          &gt;
                              Logout
                          &lt;/MenuItem&gt;
                      &lt;/Menu&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
          &lt;/div&gt;
      );
  };
  
  export default Header;
  </code></pre>