title: 'keepMounted' property on Material UI Select component not mounting menu items to DOM
body: <p>I'm trying to ensure my menu items are mounted in the DOM for SEO purposes. I'm using a MUI Select component for a dropdown nav and am passing in <code>keepMounted</code> props which are ultimately spread on the Popper component via <code>MenuProps</code>. </p>
  
  <p>I can see the menu items HTML (ul > li) mounted in my inspector but when I inspect source or CURL they don't exist. </p>
  
  <p></p>
  
  <pre><code>const TopicSelect = ({
    classes,
    width,
    selectClassName,
    topicData,
    selectedValue,
    onChange,
  }) =&gt; {
    const isMobile = isWidthDown('xs', width)
  
    return (
      &lt;FormControl data-testid="TopicSelect-formControl" variant="filled"&gt;
        &lt;InputLabel className={classes.label} htmlFor="topic-select-input"&gt;
          Filter by topic
        &lt;/InputLabel&gt;
        &lt;Select
          data-testid="TopicSelect-select"
          className={classnames(classes.select, selectClassName)}
          onChange={onChange}
          value={selectedValue}
          autoWidth
          native={isWidthDown('xs', width) ? true : false}
          input={
            &lt;FilledInput
              name="topic"
              id="topic-select-input"
              className={classes.filledInput}
              disableUnderline
            /&gt;
          }
          MenuProps={{
            style: {
              zIndex: 1500,
            },
            keepMounted: true,
          }}
        &gt;
          {isMobile
            ? [
                &lt;option value="" /&gt;,
                topicData.map(topic =&gt; (
                  &lt;option
                    key={`${topic.text}-LearnNav-menuItem`}
                    value={topic.path}
                  &gt;
                    {topic.text}
                  &lt;/option&gt;
                )),
              ]
            : [
                &lt;MenuItem key="none" value=""&gt;
                  &lt;em&gt;None&lt;/em&gt;
                &lt;/MenuItem&gt;,
                topicData.map(topic =&gt; (
                  &lt;MenuItem
                    key={`${topic.text}-LearnNav-menuItem`}
                    value={topic.path}
                  &gt;
                    {topic.text}
                  &lt;/MenuItem&gt;
                )),
              ]}
        &lt;/Select&gt;
      &lt;/FormControl&gt;
    )
  }
  </code></pre>
  
  <p>I would expect the menu items HTML to be rendered to the DOM because that's what the prop is intended to do. Not sure why they're not rendered during SSR. </p>
  
  <p>Has anyone encountered this problem before? Is there a way to make sure these items are mounted that I'm overlooking?</p>