Estoy usando el componente de autocompletar MUI con forma de gancho de reacción . Seguí esta respuesta .

ControlledAutoComplete.jsx

 import { Autocomplete, TextField } from "@mui/material"; import React from "react"; import { Controller } from "react-hook-form"; 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={""} />

Me estoy poniendo por debajo de la advertencia,

MUI: el valor proporcionado para Autocompletar no es válido. Ninguna de las opciones coincide con 0 . Puede usar la propiedad isOptionEqualToValue para personalizar la prueba de igualdad.