nested useFieldArray not resetting as expected

[mcottingham]

Version

7.45.1

Description

I think I may have found a bug with the way that the form state is being reset when there is nested state. My form state is as follows:

const formState = {
  name: "foo",
  collection: {
    items: [
      {
         name: "my-name",
         id: "123456789",
         collection2: {
             items: [
                 { id: 1, name: "foo", data: "bleh" },
                 { id: 2, name: "bar", data: "bleh2" },
             ]
        },
      },
      {
         name: "my-name2",
         id: "987654321",
         collection2: {
             items: [
                 { id: 3, name: "rawr", data: "blep" },
                 { id: 4, name: "par", data: "blap" },
             ]
         }
      }
    ]
  }
}

When I call reset on the form it seems to maintain the deep form state (ie. collection.items and collection.items.0.collection2.items.0).

I've tried passing in defaultValues:

const defaultValues = {
    collection: {
        items: []
    }
}

But whenever I call append from useFormArray I get old state in addition to the new item being added to the list.

Calling resetField on collection.items and setting the value to [] doesn't seem to wipe out the state either.

Any thoughts on what I might be doing wrong? Or is this a bug in the library?

Code of Conduct

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

[mcottingham]

Update..

I created a sandbox and it doesn't seem to exhibit the same behavior. I guess it must be something in my app itself.
https://codesandbox.io/s/keen-hellman-hmc8cw?file=/src/App.js