why there is different width of TableCell when AutoComplete and TextField is used in react material ui

Question

I don't understand the below code, why the columns width are different?

<TableContainer>
  <Table>
      <TableHead></TableHead>
      <TableBody>
      <TableRow>
        <TableCell sx={{textAlign: "center", border: "1px solid red"}}><Autocomplete getOptionLabel={(option) => option} options={["1","2","3"]} renderInput={(params) => <TextField {...params} />} /></TableCell>
        <TableCell sx={{textAlign: "center", border: "1px solid red"}}><TextField /></TableCell>
        <TableCell sx={{textAlign: "center", border: "1px solid red"}}><TextField /></TableCell>
        <TableCell sx={{textAlign: "center", border: "1px solid red"}}><TextField /></TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

The result is look like this:

What should be the solution to have equal columns width? I don't want to use table-layout: fixed; as there are other columns (not in this example but in my real code) which are completely fine to have wider/smaller column width.

I would like to achieve that the column with Autocomplete should be changed to that width what the other columns with TextField only have.

What am I doing wrong?