Material Ui 5 Autocomplete does not return filtered options

Question

I am using material ui V5,

Due to the default filtering in Autocomplete does not give proper result array, l have written my own filterOptions function.

const filterOpt = (options, state) => {
 let result = options.filter(option => option.name.includes(state.inputValue))
 return result }   

The result returning from the function is exactly what l want. But still, l can see the undesired options.

Here is my Autocomplete component :

<StyledAutocomplete
    disabled={disabled}
    id="field1"
    getOptionLabel={(option) => option.name || ""}
    isOptionEqualToValue={(option, value) => option.id === value.id}
    value={values[prop] || ""}
    noOptionsText={"No options found"}        
    options={data}
    style={{ width: "100%" }}
    PopperComponent={PopperMy}
    PaperComponent={CustomPaper}
    onChange={(event, newValue) =>
      setValues({ ...values, [prop]: newValue })
    }
    filterOptions={(options, state) => filterOpt(options, state)}
    renderInput={(params) => {
      const inputProps = params.inputProps;
      inputProps.autoComplete = "new-password";
      return (
        <StyledTextField
          {...params}
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password",
          }}
          name="field1"
          id="field1"
          autoComplete="off"
          type="text"
          label=""
          variant="outlined"
          error={error && !values[prop]}
          helperText={error && errorStatus ? errorTexts[prop] : ""}
        />
      );
    }}
  />

Here are the options that l see after filtering

Here is the results array returned from the function:

Is there any solution to show the exact filtered array to users?

Answer 1

This is because of my data array which includes some items with the same key.