Insert from useFieldArray doesn't work as expected

Describe the bug Clicking INSERT button for first FieldArray - useFieldArray1 inserts properly a new FieldArray between useFieldArray1 and useFieldArray2 but value nestedArray is [{ field1: "field21", field2: "field22" }] (so the same as second FieldArray - useFieldArray2 ) instead of [{ field1: "abc", field2: "123" }].

To Reproduce Case 1:

1. Click INSERT for first FieldArray - useFieldArray1
2. Get nestedArray = [{ field1: "field21", field2: "field22" }]

Case 2:

1. Click INSERT for second FieldArray - useFieldArray2
2. Get empty nestedArray. No nested fields are rendered

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-vitxu?file=/src/index.js

Expected behavior Case 1, 2: nestedArray should be equal to return of getFieldArrayValues function from example - insert(index + 1, getFieldArrayValues()) - in this case [{ field1: "abc", field2: "123" }] and these values should be rendered.

Desktop (please complete the following information):

• OS: macOS
• Browser chrome

Additional context

• If I change controlled inputs to uncontrolled then in both cases I get empty nestedArray
• Sometimes I get error: data.slice is not a function or its return value is not iterable but after a few page refreshes it starts to work

[DawidNazarko]

I updated codesandbox.

Initial state:

Clicking first INSERT (next to useFieldArray1) gives:

Clicking second INSERT (next to useFieldArray2) gives:

[bluebill1049]

if you want to insert, why not just insert API?