issue: Appending to a field array when there is a default value replaces the original value instead of actually appending

[zjsng]

Version Number

7.52.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-unregister-test-8drl2l

Steps to reproduce

1. Load the sandbox and open the console
2. Notice the default values, current form value from watch() and the fields returned by the useFieldArray are printed out in the console. There are also 2 text fields being displayed on the page, the 1st one having a value of "Hello" and the 2nd one having a value of "test".
3. Click on the "Append from field array" button
4. Notice that the default value was replaced instead of actually appending a 2nd object, which is the expected behaviour, which consecutive appends do correctly.

Expected behaviour

When appending an object to a field array with a default value, it should add to the array instead of replacing the default value.

What browsers are you seeing the problem on?

Edge

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

  const renderFields = fields.map((field, index) => {
    return (
      <input
        key={field.id}
        {...register(`fieldArray.${index}.field1` as const)}
      />
    );
  });

This variable before the render, will get mount/remont on each render.

[zjsng]

I've tried memoising the variable and moving it into the JSX return directly and it doesn't fix the issue.

In terms of mounting and unmounting, why does it do that? If the field.id that I've passed in as the key is stable, the virtual DOM wouldn't have updated the DOM either ways doesn't it? The field.id of the default value's 1st element and the field.id of the appended item is also the same, so I'm not quite sure what I'm actually doing wrongly here.

[zjsng]

I tested it further and found that it seems to work fine with the <Controller /> component.

[nirajrajgor]

@zjsng I am experimenting with useFieldArray example for writing in my blog and came across same issue.
Removing shouldUnregister: true or changing value to false, in the useForm initialization solved the issue for me.
I forked your code, removed shouldUnregister & it solved for your usecase as well.
I don't know the reason, but it is working that way.

@bluebill1049 Do you think it's a bug in lib?