Как сделать кнопку меткой для скрытого ввода в React с Material-UI?

Question

Итак, я хочу создать кнопку для изменения аватара в моем приложении. Я использовал скрытый ввод файлов и хотел сделать кнопку меткой, чтобы пользователь нажимал кнопку и выбирал аватар вместо ввода в файл. Вот мой код:

<Grid container spacing={2} direction="column" className={classes.avatarArea}>
  <Grid item>
    <Avatar alt={getCookie("name")} src={avatar} className={classes.avatar}>{getCookie("name").charAt(0)}</Avatar>
  </Grid>
  <Grid item>
    <Input
      style={{ display: 'none' }}
      id="avatar-file-input"
      type="file"
      accept="image/*"
      onChange={uploadAvatar} />
    <label htmlFor="avatar-file-input">
      <Button variant="contained" color="primary" className={classes.iconButton} startIcon={<CloudUploadIcon />}>Change avatar</Button>
    </label>
  </Grid>
</Grid>

Однако кнопка не работает как метка. Если я поменяю кнопку, например, на аватар (чтобы пользователю нужно было нажать на аватар, чтобы изменить его), все работает отлично. Похоже, проблема в самой кнопке.
Как настроить кнопку в качестве метки для входа?