I built an AutoComplete component that looks like this:

<Autocomplete
  freeSolo
  size="small"
  id="filter-locks-autocomplete"
  options={json_list ? json_list : []}
  groupBy={(option) => option.lock.building}
  getOptionLabel={(option) => (option.name)}
  inputValue={inputValue}
  onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label={'lock'}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} />
            {params.InputProps.startAdornment}
          </InputAdornment>
        ),
      }}
    />
  )}
/>;

However, the list of options do no longer appear when clicking inside the box. If I remove the InputProps from <TextField /> like so:

<Autocomplete
  freeSolo
  size="small"
  id="filter-locks-autocomplete"
  options={json_list ? json_list : []}
  groupBy={(option) => option.lock.building}
  getOptionLabel={(option) => option.name}
  inputValue={inputValue}
  onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
  ListboxProps={{ sx: { zIndex: 1500 } }}
  renderInput={(params) => (
    <TextField {...params} variant="standard" label={"lock name"} />
  )}
/>;

the list of options show as expected.

Is there a way I can add an inputAdornment (just a search icon) to AutoComplete component without removing the Options list?