I have a text field (select mode) with options in RadioGroup like below:

For “Service” field I can choose options from three categories. To choose an option I have to scroll down long list. That is why, I need to change text field to let give inputs and based on the inputs filter the list and show only avaialble options. Right now, I can nit give inputs, as it is in select field.

for example here I can give inputs and get related keywords:

I will provide code snippet, can you give any ideas how I can do that?

return (
<FormControl style={fieldStyle}>
  <TextField
    select
    data-testid={id}
    name={name}
    value={service}
    label={label}
    onChange={handleChange}
    SelectProps={{
      open,
      onClose: handleClose,
      onOpen: handleOpen,
      MenuProps: {
        style: styles.selectField,
        PaperProps: {
          style: styles.selectPaper
        },
        anchorOrigin: {
          vertical: 'bottom',
          horizontal: 'left'
        },
        transformOrigin: {
          vertical: 'top',
          horizontal: 'left'
        },
        getContentAnchorEl: null
      }
    }}
    style={styles.field}
  >
    <div style={styles.radioContainer}>
      <RadioGroup
        row
        name="services-radio-group"
        value={filter}
        defaultValue={filter}
        onChange={handleFilter}
        style={styles.radioGroup}
      >
        <FormControlLabel value={SERVICE_CATEGORIES.ALL_THE_CATHEGORIES} control={<Radio data-testid={SERVICE_CATEGORIES.ALL_THE_CATHEGORIES} />} label={formatMessage({id: 'Common.allTheCategories'})} />
        <FormControlLabel value={SERVICE_CATEGORIES.SERVICE} control={<Radio data-testid={SERVICE_CATEGORIES.SERVICE} />} label={formatMessage({id: 'Service.label'})} />
        <FormControlLabel value={SERVICE_CATEGORIES.SERVICE_TYPE} control={<Radio data-testid={SERVICE_CATEGORIES.SERVICE_TYPE} />} label={formatMessage({id: 'Service.serviceType'})} />
      </RadioGroup>
      <Divider style={styles.divider} />
    </div>
    {servicesFiltered?.map((item, idx) => (
      <MenuItem
        key={idx}
        data-testid={`Service.${item}`}
        value={item}
      >
        {formatMessage({id: `Service.${item}`})}
      </MenuItem>
    ))}
  </TextField>
</FormControl>

The goal is when I type letters, the list in chosen category should be filtered.