Javascript 如何使按钮成为React with Material UI中隐藏输入的标签？

所以，我想创建一个按钮来更改我的应用程序中的头像。我使用隐藏文件输入，并希望使一个按钮成为它的标签，所以用户会点击一个按钮，选择化身，而不是输入文件输入。这是我的密码：

<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>

{getCookie（“name”）.charAt（0）}
改变化身

但是，按钮不能用作标签。例如，如果我用头像来改变按钮（用户需要点击头像来改变它），一切都很好。因此，问题似乎出在按钮本身。
如何将按钮设置为输入的标签