Material UI TextField label 出现在popper上

Question

I am using Material-UI and I have a form with TextFields.

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?

Here is the relevant code:

    <Popper id="userList" open={searchOptionsOpen} anchorEl={anchorEl} transition>
      {({ TransitionProps }) => (
        <Fade {...TransitionProps} timeout={350}>
          <ClickAwayListener onClickAway={handleClose}>
            <Paper fullWidth>
              <Grid container>
                <Grid item xs={12}>
                  <List className={styles.popperList}>
                    <ListItem>
                      <ListItemText className={styles.popperAddNewUser} primary="Add new user" />
                    </ListItem>
                    {fetchedUsers.map((user, index) => (
                      <ListItem key={index}>
                        <ListItemText>{user.displayName}</ListItemText>
                      </ListItem>
                    ))}
                  </List>
                </Grid>
              </Grid>
            </Paper>
          </ClickAwayListener>
        </Fade>
      )}
    </Popper>
  </Grid>
  <Grid item xs={12} className={styles.header}>
    <Typography variant="h2">{t('users.add.userDetails')}</Typography>
  </Grid>
  <Grid item xs={6}>
    <TextField
      fullWidth
      required
      aria-labelledby="first-name-text"
      id="firstName"
      value={userDetails.firstName}
      onChange={handleTextChange('userDetails')}
      variant="outlined"
      label={t('users.add.input.firstName')}
      margin="dense"
      className={styles.leftTextField}
    />
  </Grid>

Answer 1

Try setting the Z-Index on the Popper itself to something higher and that will solve the issue.