title: Material UI TextField label appears over the popper
body: <p>I am using Material-UI and I have a form with TextFields.</p>
  <p><a href="https://i.stack.imgur.com/8mSjX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8mSjX.png" alt="Material UI Form" /></a></p>
  <p>When I activate my popper, the labels from the form textfields overlay the popper, but not the field itself. Why does it overlay, and how can I remove the overlay so that the popper is on top?</p>
  <p><a href="https://i.stack.imgur.com/E2oOv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E2oOv.png" alt="Material UI Form with overlayed textfield labels" /></a></p>
  <p>Here is the relevant code:</p>
  <pre><code>    &lt;Popper id=&quot;userList&quot; open={searchOptionsOpen} anchorEl={anchorEl} transition&gt;
        {({ TransitionProps }) =&gt; (
          &lt;Fade {...TransitionProps} timeout={350}&gt;
            &lt;ClickAwayListener onClickAway={handleClose}&gt;
              &lt;Paper fullWidth&gt;
                &lt;Grid container&gt;
                  &lt;Grid item xs={12}&gt;
                    &lt;List className={styles.popperList}&gt;
                      &lt;ListItem&gt;
                        &lt;ListItemText className={styles.popperAddNewUser} primary=&quot;Add new user&quot; /&gt;
                      &lt;/ListItem&gt;
                      {fetchedUsers.map((user, index) =&gt; (
                        &lt;ListItem key={index}&gt;
                          &lt;ListItemText&gt;{user.displayName}&lt;/ListItemText&gt;
                        &lt;/ListItem&gt;
                      ))}
                    &lt;/List&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/Paper&gt;
            &lt;/ClickAwayListener&gt;
          &lt;/Fade&gt;
        )}
      &lt;/Popper&gt;
    &lt;/Grid&gt;
    &lt;Grid item xs={12} className={styles.header}&gt;
      &lt;Typography variant=&quot;h2&quot;&gt;{t('users.add.userDetails')}&lt;/Typography&gt;
    &lt;/Grid&gt;
    &lt;Grid item xs={6}&gt;
      &lt;TextField
        fullWidth
        required
        aria-labelledby=&quot;first-name-text&quot;
        id=&quot;firstName&quot;
        value={userDetails.firstName}
        onChange={handleTextChange('userDetails')}
        variant=&quot;outlined&quot;
        label={t('users.add.input.firstName')}
        margin=&quot;dense&quot;
        className={styles.leftTextField}
      /&gt;
    &lt;/Grid&gt;
  </code></pre>