using a nested useFieldArray in Modals affecting other fields too

[bug-author]

Hi. I have a nested useFieldArray setup:

  const defaultValues = {
    addressAndSignatureFields: [
      {
        address: '',
        signatures: [{ signature: '' }],
      },
    ],
  };

  const { control, register, handleSubmit, reset } = useForm({
    defaultValues,
  });

On the UI I want to have the address fields and for adding the nested signatures I want to have a Modal component where I do that. I followed this Nested useFieldArray code sandbox https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-m8w6j, but the issue is that my solution works fine without the Modal but when using the Modal, it affects the fields in Modals associated with other address fields too.

If I add signature fields in the Modal for one address, it adds empty fields in other modals. If I remove them, it removes fields from other Modals too.

I have tried using Modal components fro shadcn and also made my own but the issue is still there.

Recording - Usage without Modal - No issues

Screen.Recording.2024-04-24.at.8.52.59.PM.mov

Recording - Usage with Modal - having issues

Screen.Recording.2024-04-24.at.8.50.48.PM.mov

My Code Sandbox link: https://codesandbox.io/p/devbox/stupefied-mestorf-y7hrjq