How can I keep the same styling in this Autocomplete MUI when changing the view?

My issue is that when I’m in editMode, the textfield inside the autocomplete changes its styling and also when I choose an option from the dropwdown.

I’ve tried to modify the Textfield inside the autocomplete and the getOptionsLabel but I endup with worse solutions.
What I expect is to be in editMode, and the textfield remains excatly the same as before but for some reason which I cannot find, the styling is different.
So this is image before being in EditMode and the styling that I want to use in the textfield too.
enter image description here

this is the image in editMode
enter image description here

the information is the same but not the position

this is the code

  // Format the value for the Autocomplete component
  const formatValue = (option: Material): ReactElement => (
    <Stack px={3} py={2} width={1}>
      <Typography variant="bodySmall.default">
        {option.libraryRef}
      </Typography>
      <Typography variant="captions.default" color={alpha(palette.primary.main, 0.7)}>
        {option.composition}
        {'manufactureDetail' in option && option.manufactureDetail?.manufactureDetailName ? ` • ${option.manufactureDetail.manufactureDetailName}` : ''}
        {' | '}
        {option.weight}
      </Typography>
    </Stack>
  );

  const handleChange = (
    event: React.SyntheticEvent,
    newValue: Material | { id: string; libraryRef: string; composition: string; weight: string } | null,
  ): void => {
    if (newValue && 'materialSubcategory' in newValue) {
      setSelectedMaterial(newValue);
    }
  };

  return (
    <Stack
      direction="row"
      height={1}
      flexGrow={1}
      alignItems="center"
      boxSizing="border-box"
    >
      {isEditMode ? (
        <Autocomplete
          groupBy={(option) => {
          if ('materialSubcategory' in option && option.materialSubcategory) {
            return option.materialSubcategory.materialSubcategoryName;
          }
          return '';
          }}
          value={selectedMaterial ?? value}
          options={[{ id: 'on-the-fly', libraryRef: 'Material On The Fly', composition: '', weight: '' }, ...materials]}
          getOptionLabel={(option) => `${option.libraryRef} | ${option.composition}${'manufactureDetail' in option && option.manufactureDetail?.manufactureDetailName ? ` • ${option.manufactureDetail.manufactureDetailName}` : ''} | ${option.weight}`}
          renderInput={(params: AutocompleteRenderInputParams): ReactElement => (
            // This is what we see when the dropdown is closed
            <Stack direction="row">
              <TextField
                {...params}
                placeholder={!value ? '' : 'Select Material'}
                inputProps={{
                  ...params.inputProps,
                  readOnly: false,
                }}
                InputProps={{
                  ...params.InputProps,
                  disableUnderline: true,
                  startAdornment: (
                    <ImagePlaceholder
                      sx={{
                        width: THUMBNAIL_SIZE,
                        minWidth: THUMBNAIL_SIZE,
                        height: THUMBNAIL_SIZE,
                        marginRight: 3,
                      }}
                    />
                  ),
                }}
                sx={{
                  [`& .${autocompleteClasses.inputRoot}`]: {
                    ['& input']: {
                      ...theme.typography['bodySmall.default'],
                    },
                  },
                  [`& .${autocompleteClasses.popupIndicator}`]: {
                    right: 12,
                    display: 'flex',
                    alignItems: 'center',
                    width: '16px !important',
                    height: '16px !important',
                    ['&:hover']: {
                    backgroundColor: 'transparent',
                    },
                  },
                }}
              />
            </Stack>
          )}
          renderOption={(props, option) => (
            <>
              {/*this is the materials grouped by MSC name*/}
              <MaterialOption
                option={option}
                props={props}
              />
              {/*this is the material on the fly option with the plus icon*/}
              {'id' in option && option.id === 'on-the-fly' && (
                <MaterialPickerGroup
                  option={option}
                  props={props}
                  setShowMaterialOnTheFlyDialog={setShowMaterialOnTheFlyDialog}
                />
              )}
            </>
          )}