Material-ui select grouping - material-ui

Question

I'm trying to create a select with ListItems in toggle-able groups. The issues I'm running into are that the select menu closes when toggling the group and I can't get the value of the selected item.
handleDropdown = () => {
this.setState({ showReports: !this.state.showReports })
}
<Select
value={this.state.report}
onChange={this.handleReportChange}
>
<List component="nav">
<ListItem button>
<ListItemText inset primary="Sent mail" />
</ListItem>
<ListItem button>
<ListItemText inset primary="Drafts" />
</ListItem>
<ListItem button onClick={this.handleDropdown}>
<ListItemText inset primary="Inbox" />
{this.state.showReports ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.showReports} timeout="auto" unmountOnExit>
<List component="div">
{this.state.reportList.map((report) => (
<ListItem button value={report.name} key={report.name} className={classes.nested}>
<ListItemText inset primary={report.displayName} />
</ListItem>))
}
</List>
</Collapse>
</List>
</Select>