Several issues with array fields (mostly nested but also normal)

[terebentina]

Bug Report

Describe the Bug

CSB: https://codesandbox.io/s/rcf-arrays-and-lists-forked-m9tem?file=/index.js

✔️ Initial render works ok
✔️ Pushing to the outer array works
🛑 Using the fieldName as the key in the loop leads to the exact same bugs as using the index: https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318#.6nz2tbgsw
Reproduction:

• start fresh with the csb
• note how iron man has 2 arr elements (iron arr.0 and iron arr.1).
• click on insert under the table to insert spider man with a single arr element
• notice how spider man has 2 arr elements and iron man just 1
  You either need to create a stable ID for each field when calling useFieldArray or making the actual field available to users and they can deal with making sure they have an id for each element.
  So either:

const [fields, { push, remove }] = useFieldArray(fieldName);
console.log(fields); // [{name:'arr[0]', id: '0fhdf-123gfu3-nenf73'}]

or

const [fieldNames, fields, { push, remove }] = useFieldArray(fieldName);
console.log(fieldNames); // ['arr[0]']
console.log(fields); // [{id:'abc123', firstName: 'my name', lastName: 'my other name'}]

🛑 Pushing to the inner array doesn't do anything. Click on any inner push button.
🛑 Resetting the form throws an error after you push/insert into the array
🛑 Resetting the form doesn't restore the initial arr for iron man (remove iron man and then reset - arr is now empty).

CodeSandbox Link

https://codesandbox.io/s/rcf-arrays-and-lists-forked-m9tem?file=/index.js

[wellyshen]

@terebentina Thank you for reporting this issue.

[mmahalwy]

@wellyshen still being worked on?