How to get dirty state of part of nested form, despite removing fields in other parts of form?

[skorphil]

I have form like:

{
  institutions: [
     { // i need to check if there any changes inside City Bank (institutions.0)
        name:"City Bank", 
        assets: [
          {amount:"", currency:""}
          {amount:"", currency:""}
        ]
     },
  {
        name:"Bank of America",
        assets: [
          {amount:"", currency:""}
          {amount:"", currency:""} // removing or adding asset will result in all `institutions.X` being dirty
        ]
     }
  ]
}

I need to check if there is any edits in City Bank:

getFieldState('institutions.0', formState);

It works fine if i edit any of the nested fields, like institutions.0.assets.1.amount

BUT: if i remove or add any field to any of institutions.X.assets.X, all institutions.X become dirty, despite there is no changes in them
formState.dirtyFields will return that everything is dirty, but individual fields are NOT dirty:

...
  {
        name:false,
        assets: [
          {amount:false, currency:false}
          {amount:false, currency:false}
        ]
     }

How do i check the individual dirty state of institutions.0, without being affected by fields number change in others institutions.X?

[skorphil]

I know i can manually iterate through all nested fields inside of institutions.X, but maybe there is other better way of doing this 'natively'?

[sujinleeme]

You can iterate two useFieldArrays for nested array fields.
Here's the codesandbox

In the FieldArray component:

 const { fields, append, remove, prepend } = useFieldArray({
    control,
    name: "institutions",
  });

In the NestedFieldArray component:

  const { fields, remove, append } = useFieldArray({
    control,
    name: `institutions.${nestIndex}.assets`,
  });

You might need to use remove or append from the nested useFieldArray to ensure only the nested array is modified. Therefore. it won't overwrite the ancestor and children fields.

In the codesandbox, if a user clicks the "Append nested" button, the nested array is appended. In the console, you can check all institutions.0.assets.1 fields are true.