issue: Controlled Field Array Controller component does not render latest value with update(index, { ...item, lastName: "World", }); if using spread operator {...item, lastName: "World"} to update an object

[AlanNggg]

Version Number

7.51.5

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/sparkling-sound-33tjcv?file=%2Fsrc%2FApp.js

Steps to reproduce

1. Create a Controlled Field Array

 const { register, control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }],
    },
  });
  const { fields, append, update } = useFieldArray({
    control,
    name: "test",
  });
  const watchFieldArray = watch("test");
  const controlledFields = fields.map((field, index) => {
    return {
      ...field,
      ...watchFieldArray[index],
    };
  });

2. Create a form with the controlledFields, Controller component and a button to call update method returned from useFieldArray with obj param like {...item, lastName: "World"}

<form onSubmit={handleSubmit(onSubmit)}>
        <ul>
          {controlledFields.map((item, index) => {
            return (
              <li key={item.id}>
                <Controller
                  render={({ field }) => <input {...field} />}
                  name={`test.${index}.firstName`}
                  control={control}
                />
                <Controller
                  render={({ field }) => <input {...field} />}
                  name={`test.${index}.lastName`}
                  control={control}
                />
                <button
                  type="button"
                  onClick={() => {
                    update(index, {
                      ...item,
                      lastName: "World",
                    });
                  }}
                >
                  reset
                </button>
              </li>
            );
          })}
        </ul>
      </form>

Expected behaviour

Currently, calling update method like update(index, { ...item, lastName: "World", }); to update an object when using Controlled Field Array and register method from useForm is able to render updated value.

However, Controller component cannot render updated value as render props is not updated.

It is expected that Controller component should render the updated value same as register method when calling update method like update(index, { ...item, lastName: "World", });

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct