issue: cleanup process in useController crashes when used with useFieldArray in certain cases

[nakaakist]

Version Number

7.51.5

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-null-check-zqxx7v?file=%2Fsrc%2FApp.js

Steps to reproduce

1. Go to the codesandbox.
2. Click on "remove 0th elem from array (will cause error)" button
3. See error

Expected behaviour

The error should not occur.

The cause of the error is as follows:

• In the CodeSandbox, a form with the default value { arr: [{ k: 0 }, { k: 1 }] } is rendered as follows:
  • The 0th element of the arr field is rendered by the <Zeroth /> component where the "arr.0" path is controlled by useController.
  • The 1st element of the arr field is rendered by <First /> component where the "arr.1.k" path is controlled by useController.
• When the "remove 0th elem" button is clicked:
  1. The 0th element is removed from the form's control._fields. Here, the resulting control._fields is { arr: [{ k: { _f: ... }] } because arr.1.k is controlled by useController.
  2. Both <Zeroth /> and <First /> components start to unmount.
  3. When unmounting the <Zeroth /> component, the cleanup process in useController for the "arr.0" path is executed. Here, this cleanup expects control._fields to be { arr: [{ k: ..., _f: ... }, ...] }. However, as mentioned above, the _f field does not exist.
  4. This causes the app to crash.

Although the current example is too trivial to use useController (just the return values of useFieldArray are enough), in a complex form with heavily nested form values, using useController with useFieldArray can sometimes be more convenient.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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