Quiero centrar verticalmente InputLabel dentro del elemento MUI Grid . Intenté lo siguiente:

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

Pero no se alinea verticalmente:

enlace de Codesandbox

Tenga en cuenta que configurar sx={{ verticalAlign: "middle" }} en la segunda InputLabel tampoco ayuda.

¿Cómo se debería (posiblemente idealmente) centrar verticalmente InputLabel (o cualquier otro control) dentro del elemento Grid ?