Как остановить автофокусировку на пунктах меню Mui

Я реализую функцию поиска внутри специального компонента Mui Select. Идея заключается в том, что пользователь может начать вводить город или страну, и список опций будет отфильтрован. Проблема в том, что как только пользователь вводит букву, которая также является первой буквой параметра, параметр автоматически фокусируется, а текстовое поле размывается. Как мне это решить?? Я попробовал autoFocus = {false} для пункта меню, но это не помогло. Текущий код:

      <div>
        <StyledButton
          aria-controls = "location-select-menu"
          aria-haspopup = "true"
          aria-expanded = {anchorEl ? 'true' : 'false'}
          onClick = {handleOpen}
          endIcon = {<KeyboardArrowDownIcon />}
          theme = {theme}
          disableRipple
          clicked = {clicked.toString()}
        >
          {t('location')} {cities.length > 0 ? `(${cities.length})` : ""}
        </StyledButton>
        <StyledMenu
          id = "search-location-menu"
          anchorEl = {anchorEl}
          open = {Boolean(anchorEl)}
          onClose = {handleClose}
          anchorOrigin = {{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin = {{
            vertical: 'top',
            horizontal: 'left',
          }}
          autoFocus = {false}
        >
          <ListSubheader sx = {{ height: "45px" }}>
            <Grid container justifyContent = "space-between">
              <Grid item xs = {1}>
                <SearchIcon fontSize = {16} />
              </Grid>

              <Grid item xs = {7}>
                <BorderlessTextField
                  id = "search-location"
                  variant = "standard"
                  size = "small"
                  InputProps = {{
                    disableUnderline: true,

                  }}
                  value = {searchValue}
                  onChange = {handleSearchChange}
                />
              </Grid>
              <Grid item xs = {4}>
                <CityOrCountrySelect
                  handleChangeEventCountryOrCitySelected = {handleChangeEventCountryOrCitySelected}
                  countryOrCitySelected = {countryOrCitySelected}
                />
              </Grid>
            </Grid>
          </ListSubheader>
          <hr />
          {
            filteredSearchOptions?.map((option) => (
              <MenuItem

                key = {option.value}
                selected = {isCity ? cities.includes(option.value) : country === option.value}
                onClick = {(event) => handleClick(event, option.value)}
              >
                {option.label}
              </MenuItem>
            ))
          }
        </StyledMenu>
      </div>