React Material UI Autocomplete with react-hook-form

Material UI Autocomplete wont load the selected fields even though the react-hook-form values has been updated.

Here's the code

import { useForm, Controller, FormProvider } from "react-hook-form";
import { Autocomplete, Checkbox, TextField } from "@mui/material";
import CheckBoxIcon from "@mui/icons-material/CheckBox";
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
import { useEffect } from "react";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

type IOptions = {
  id: number;
  name: string;
};

type IForm = {
  persons: IOptions[];
};

export default function Form() {
  const methods = useForm<IForm>();

  const persons = [
    { id: 1, name: "john doe" },
    { id: 2, name: "Jane Doe" },
  ];

  useEffect(() => {
    methods.reset({
      persons: [persons[0]],
    });

    console.log(methods.getValues());
  }, []);

  return (
    <FormProvider {...methods}>
      <form>
        <Controller
          name="persons"
          render={({ field: { onChange, value, ...rest } }) => (
            <Autocomplete
              multiple
              options={persons}
              getOptionLabel={(option) => option.name}
              renderOption={(props, option, { selected }) => (
                <li {...props} key={`person-${option.id}`}>
                  <Checkbox
                    key={`checkbox-${option.id}`}
                    icon={icon}
                    checkedIcon={checkedIcon}
                    checked={selected}
                  />
                  {option.name}
                </li>
              )}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Persons"
                />
              )}
              onChange={(e, newValue) => onChange(newValue)}
              {...rest}
              value={value}
            />
          )}
        />
      </form>
    </FormProvider>
  );
}

I provided a working sandbox.

https://codesandbox.io/p/sandbox/quirky-panini-z8hkgd?file=%2Fsrc%2FForm.tsx%3A1%2C1-78%2C1

I'm not sure why the values on the autocomplete field is not being pre populated.

You miss add default value for person field. Sets an Array value for a field that is initially undefined. Here it gives an error about Uncontrolled because the types don't match. Therefore, I set an empty array defaultValue to the persons field (to match the types). And added isOptionEqualToValue props again. To compare the selected option (comparing by id key)

const methods = useForm<IForm>({
    defaultValues: {
      persons: [],
    },
  });

//add this props to Autocomplete for comparing option and value by id key
isOptionEqualToValue={(option, value) => option.id === value.id}