Mui5 Autocomplete warning

Question

I'm using Material-UI 5 AutoComplete component and I have a warning I can't handle.

The code:

       <Autocomplete
          disableClearable
          options={options}
          value={{ displayName: selectedName || "" }}
          getOptionLabel={(option) => option.displayName || ""}
          onChange={onSelectChange.bind(null, selectedName)}
          isOptionEqualToValue={(option, selected) =>
             option.displayName === selected.displayName
          }
          renderOption={(props, option) => (
            <li {...props}>
              <Typography>{option.displayName}</Typography>
            </li>
          )}
         renderInput={(params) => (
            <TextField
              {...params}
              variant="outlined"
              placeholder={placeholder}
            />)}
        />

The warning:

useAutocomplete.js:220 MUI: The value provided to Autocomplete is invalid.
None of the options match with `{"displayName":""}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.

Every option is an object with a displayName field, (e.g: {displayName})

I saw some posts about it but nothing helped. I'm using a controlled component(value prop) and at the first render the selectedName is empty So I'm getting the error before I'm selecting an item from the list.

Answer 1

Maybe there should be a check in isOptionEqualToValue to check value of selected? Similar like this:

isOptionEqualToValue={(option, value) => {
          if (value === "" || value === option)
              return true;
      }}

Actually to check displayName.