Как открыть выбранный вложенный список в Material-UI?

У меня есть код в React, где у меня есть два меню списка, в которых есть вложенные меню.

class Nav extends React.Component {
  state = { open: false };  handleClick = () => {
    this.setState({ open: !this.state.open });
  };  render() {
    const { classes } = this.props;    return (
      <div className={classes.root}>
        <List
          component="nav"
        >
          <ListItem button onClick={this.handleClick}>
            <ListItemText primary="Files" />
            {this.state.open ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Providers" />
              </ListItem>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Insurance Companies" />
              </ListItem>
            </List>
          </Collapse>
          <ListItem button onClick={this.handleClick}>
            <ListItemText primary="Utilities" />
            {this.state.open ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Excel Templates" />
              </ListItem>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Upload File" />
              </ListItem>
            </List>
          </Collapse>
        </List>
      </div>
    );
  }
}

Когда я нажимаю на первое меню, открывается второе меню. Как открыть только одно меню, а другое останется закрытым?