I am struggling on how to properly set up a long list of [Menu Items](https://material-ui.com/api/menu-item/) on a [Select control](https://material-ui.com/components/selects/) that uses sticky SubHeaders. The problem is that when the items scroll they obscure the subheaders.

I looked at the Material UI examples of [grouped Select items](https://material-ui.com/components/selects/#grouping) as a start. I wanted behavior that looked like the Material UI example with [pinned subHeader Lists](https://material-ui.com/components/lists/#pinned-subheader-list).

Here is a [codeSandbox](https://codesandbox.io/s/failed-select-menu-subheaders-oqmy2?file=/demo.js) of what I'm trying. 

Below is a snippet of my code:

```
<Select
        className={classes.root}
        MenuProps={{ className: classes.menu }}
        value="Pick one"
        onChange={e => {}}
      >
        {subHeaders.map(header => (
          <li key={header}>
            <ul>
              <ListSubheader>{header}</ListSubheader>
              {items.map(item => (
                <MenuItem key={item} value={item}>
                  {item}
                </MenuItem>
              ))}
            </ul>
          </li>
        ))}
      </Select>

```

Here is a snapshot of the problem:

[![enter image description here](https://i.stack.imgur.com/ii2Vy.png)](https://i.stack.imgur.com/ii2Vy.png)