I want to vertically center InputLabel inside MUI Grid item. I tried following:

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>
  );
}

But its not getting vertically aligned:

codesandbox link

Note that setting sx={{ verticalAlign: "middle" }} in second InputLabel also doesnt help.

How one should (possibly ideally) vertically center InputLabel (or any other control) inside Grid item?