How to align Material ui textfields in React? - reactjs

Question

I am developing a React js application using Material ui components.
I am a 2 column grid, each column has 4 textField.
Some of those textField are weapped in Autocomplete component.
The problem is that they don't have the same styles thus they are not aligned facing each others.
Here is a screenshot of the result
As you can notice the problem in the second and third row of the left column.
Here is my code
<Grid container style={{ width: "100%", marginTop: 10 }}>
<Grid item style={{ padding: 10 }} xs={12} sm={12} md={6}>
<TextField
className={`${classes.textfield} ${
values.nameError && classes.inputError
}`}
onFocus={(e) => setValues({ ...values, nameError: false })}
onChange={(e) => setValues({ ...values, name: e.target.value })}
error={values.nameError}
helperText={values.nameError ? t("Obligatoire") : ""}
margin="normal"
fullWidth
type="text"
value={values.name}
label={t("nomFR") + " *"}
autoComplete="given-name"
/>
//Same for the rest
</Grid>
<Grid item style={{ padding: 10 }} xs={12} sm={12} md={6}>
<SelectInputWrapper>
<FormControl fullWidth>
<Autocomplete
options={spaces}
getOptionLabel={(option) => option.label}
renderOption={(option, { selected }) => (
<div className={classes.menuItem}>{option.label} </div>
)}
value={values.espace}
disableClearable
renderInput={(params) => (
<TextField
{...params}
error={values.espaceError}
onFocus={(e) =>
setValues({ ...values, espaceError: false })
}
style={{ marginLeft: 3, marginRight: 3 }}
margin="normal"
value={""}
label={t("Espace") + " *"}
/>
)}
/>
{values.espaceError && (
<FormHelperText className={classes.helper} error={true}>
{t("Obligatoire")}
</FormHelperText>
)}
</FormControl>
</SelectInputWrapper>
//Same for the rest
</Grid>
</Grid>
Notice, I am not giving any margins or paddings.
Is there a solution please? I am stuck here for 2 days.