如何在 MUI 网格项目中垂直居中输入标签？

Question

我想在 MUI Grid 项目中垂直居中 InputLabel。我试过以下：

import { FormControl, Grid, Input, InputLabel, TextField } from "@mui/material";

export default function App() {
  return (
    <Grid container>
      <Grid item xs={2}>
        <InputLabel htmlFor="name-input">First Name: </InputLabel>
      </Grid>
      <Grid item xs={10}>
        <TextField size="small"></TextField>
      </Grid>
      <Grid item xs={2}>
        <InputLabel sx={{ verticalAlign: "middle" }} htmlFor="name-input">
          First Name:{" "}
        </InputLabel>
      </Grid>
      <Grid item xs={10}>
        <TextField size="small"></TextField>
      </Grid>
    </Grid>
  );
}

但它没有垂直对齐：

codesandbox link

请注意，在第二个 InputLabel 中设置 sx={{ verticalAlign: "middle" }} 也无济于事。

如何（可能理想地）在 Grid 项目中垂直居中 InputLabel（或任何其他控件）？