Problems with appending and removing in same submission

[henrichem]

I am using a form which has a mapping of x amount of components which in turn has a set of inputs and selects. When removing and adding elements, the remove and append-functions from useFieldArray are used.

A previous problem was that when a new item had been added (with empty fields) and an element above (which had set values from defaultvalues) was removed, the values of the removed element were rendered inside the new element (but not its' underlying data. To solve this, I had to unregister all properties of the removed element. I could not unregister the whole object, since then always two elements in the form would be deleted.

My current problem is that when one item is added, and a previous item is removed, the new item cannot be submitted. It fails validation since no new values are correctly registered. All properties are registered with: "nameOfComponent.${index}.propertyName". However, when logging only "nameOfComponent.${index}", all changes are apparent.

What is weird is that this issue only exists with the above actions. If two items are added, and one previous is removed, it works as expected. When first removing an item and then adding a new, it works as expected.

How can I solve this?

[oluwatunmiisheii]

Can you create a sample code, maybe on codesandbox and share?