MUI: The value provided to Autocomplete is invalid.None of the options match with 0

[sujeet-agrahari]

I am using MUI autocomplete component with react-hook-form.
I followed this answer.

ControlledAutoComplete.jsx

const ControlledAutoComplete = ({
  options = [],
  label,
  renderInput,
  getOptionLabel,
  control,
  defaultValue,
  name,
  errors,
}) => {
  return (
    <Controller
      defaultValue={defaultValue}
      name={name}
      control={control}
      render={({ field }) => (
        <Autocomplete
          options={options}
          getOptionLabel={getOptionLabel}
          defaultValue={defaultValue}
          renderInput={(params) => (
            <TextField
              {...params}
              label={label}
              error={errors[name]}
              helperText={errors[name] && errors[name].message}
              onChange={(e, data) => field.onChange(data)}
            />
          )}
          {...field}
          isOptionEqualToValue={(option, value) =>
            value === undefined || value === "" || option.id === value.id
          }
        />
      )}
    />
  );
};

export default ControlledAutoComplete;

AddFees.jsx

          <ControlledAutoComplete
            control={control}
            name="enrollmentId"
            options={[{ id: 1, firstName: "John"}, { id: 2, firstName: "Jen" }]}
            getOptionLabel={(option) => `${option.firstName}`}
            label="Select Students"
            errors={errors}
            defaultValue={""}
          />

I am getting below warning,

MUI: The value provided to Autocomplete is invalid.
None of the options match with 0.
You can use the isOptionEqualToValue prop to customize the equality test.

[sujeet-agrahari]

I was doing it wrong. I was listening for onChange on text field while it should be on AutoComplete

const ControlledAutoComplete = ({
  options = [],
  label,
  renderInput,
  getOptionLabel,
  control,
  defaultValue,
  name,
  errors,
}) => {
  return (
    <Controller
      name={name}
      control={control}
      defaultValue={defaultValue}
      render={({ field }) => (
        <Autocomplete
          options={options}
          getOptionLabel={getOptionLabel}
          renderInput={(params) => (
            <TextField
              {...params}
              label={label}
              error={errors[name]}
              helperText={errors[name] && errors[name].message}
            />
          )}
          {...field}
          isOptionEqualToValue={(option, value) =>
            value === undefined || value === "" || option.id === value.id
          }
          onChange={(_, data) => field.onChange(data)}
        />
      )}
    />
  );
};

Usage,

          <ControlledAutoComplete
            control={control}
            name="enrollmentId"
            options={students}
            getOptionLabel={(option) => `${option.firstName}`}
            label="Select Students"
            errors={errors}
            defaultValue=""
          />

[irinrudko]

I'm having the same issue with both Autocomplete and react-hook-form, but my code looks exactly the same as the one in the answer. But still for one of the select inputs the value is not displayed.