Insert/Append/Prepend drops nested data

I will like to thank you for building such great library, it literally saved me from perf hell.

Describe the bug Using useFieldArray’s append, insert, prepend with nested array of objects, where one of the value in the object is another nested array. The field (field1 in the example) gets omitted.

    insert(1, {
      name: "insert",
      nestedArray: [{ field1: ["field1", "field11"], field2: "field2" }]
    });

will generate the following form data.

{
  "test": [
      {
          "name": "insert",
          "nestedArray": [
              {
                  "field2": "field2"
              }
          ]
      }
  ]
}

To Reproduce Steps to reproduce the behavior:

1. Go to CSB
2. Click on buttons: APPEND, APPEND NESTED, PREPEND, INSERT, PREPEND NESTED
3. Click on SUBMIT
4. Scroll down to console, and check the output data
5. Only element fields created by setValue will preserve field1; element fields that are created by append, insert, prepend do not have field1.

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

Expected behavior append, insert, prepend should preserve deeply nested array (field1).

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 91

[Xadoy]

Thanks for being so responsive, I have changed my data structure to work around this. Also thanks for the knowledge, I am not sure if I am using RHF the worst way (maybe “anti-patter”), but I have been thru I lots of problems, especially for setValues() and useWatch(), they always triggered some unexpected behaviour to me. I might try to summarize those cases if I could. Or I should read a little more about how to use RHF properly.

[dancixx]

@bluebill1049 I can reproduce my code. I want something like that. https://codesandbox.io/s/priceless-dijkstra-4j4vv?file=/src/App.tsx