Getting errors/warnings when using useFieldArray in a React-Hook-Form implementation

[Biz-e-Services]

I have a custom MUI Autocomplete component that is utilized on a form using React-Hook-Form useFieldArray function. It produces the following warning:

The value provided to Autocomplete is invalid.
None of the options match with `{"id":"1","name":"Electrical High Voltage"}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.

What do I need to to change in my isOptionEqualToValue to fix this issue. The custom component works great in all my other components, but presents the warning when used within useFieldArray.

My Parent component

... other code
import { useStateMachine } from "little-state-machine";
import { MUIAutocomplete } from "../../../shared/components/common/MUIAutocomplete";

... other code
  const { fields, append, remove, reset } = useFieldArray({
    name: "eiclDetail.checklistDetail",
  });
... other code

{fields.map((item, index) => {
                return (
                  <div key={item.id}>
<MUIAutocomplete
                            name={`eiclDetail.checklistDetail.${index}.code`}
                            label="Code"
                            variant="outlined"
                            size="small"
                            fullWidth
                            options={[
                              { id: 1, name: "Electrical High Voltage" },
                              { id: 2, name: "Electrical Low Voltage" },
                              { id: 3, name: "Radiation" },
                              { id: 4, name: "Mechanical" },
                            ]}
                          />
                );
              })}
... other code

My Custom Component

  <Controller
     name={props.name}
     control={control}
     defaultValue={props.multiple ? [] : null}
     render={({ field: { ref, ...field }, fieldState: { error } }) => (
       <Autocomplete
         {...field}
         readOnly={props.readOnly}
         disableCloseOnSelect={disableCloseOnSelect ? true : false}
         multiple={props.multiple}
         disableClearable={disableClearable ? true : false}
         //filterSelectedOptions
         options={props.options}
         //value={field.value}
         getOptionLabel={(
           option //option?.name
         ) =>
           option?.name === undefined ||
           option?.name === "" ||
           option?.name === [] ||
           option?.name
         }
         renderOption={(props, option) => {
           return (
             <Box
               component="li"
               {...props}
               key={option.id}
               color={
                 color
                   ? color.map((value) =>
                       value.id === option.id ? "green" : null
                     )
                   : null
               }
             >
               {option.name}
             </Box>
           );
         }}
         isOptionEqualToValue={(option, value) =>
           value === undefined || value === "" || option.id === value.id
         }

         onChange={(_, data) => field.onChange(data)}
         renderInput={(params) => (
           <TextField
             {...params}
             {...props}
             error={error ? true : false}
             helperText={error ? error.message : ""}
           />
         )}
         renderTags={(tagValue, getTagProps) =>
           tagValue.map((option, index) => (
             <div style={{ width: "100%", mt: 1 }} key={option.id}>
               <Chip
                 {...getTagProps({ index })}
                 label={option.name}
                 key={option.id}
                 variant="outlined"
                 deleteIcon={<DeleteIcon />}
                 color="primary"
               />
             </div>
           ))
         }
       />
     )}
   />

My MongoDB JSON structure:

...
"eiclDetail": {
...
...
      "checklistDetail": [
        {
          "code": {
            "id": "1",
            "name": "Electrical High Voltage"
          },
          ...
		  ...
        }
      ],
    },
...

Thanks in advance.

[Biz-e-Services]

Found a comment by Moshyfawn, https://github.com/orgs/react-hook-form/discussions/7953
explaining my issue above.

RHF uses id field as it's internal uuid to track the field array values, position etc.

I've since altered my data field names and have dispensed with the field named "id" and gone with "code". All working now.