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

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={""}
          />

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.