🌚 fix #8970 register remove existing registered fields (#8973)

* fix #8970 register wipe existing fields

* update test case

src/__tests__/useFieldArray.test.tsx

@@ -3659,4 +3659,60 @@ describe('useFieldArray', () => {
       screen.getByText('Min length of 3');
     });
   });
+
+  it('should update isValid correctly with rules props and inline validation', async () => {
+    const App = () => {
+      const {
+        control,
+        register,
+        formState: { isValid },
+      } = useForm({
+        defaultValues: {
+          test: [{ value: '1' }],
+        },
+      });
+      const { fields, append } = useFieldArray({
+        control,
+        name: 'test',
+        rules: {
+          required: true,
+        },
+      });
+
+      return (
+        <div>
+          {fields.map((field, index) => (
+            <input
+              key={field.id}
+              {...register(`test.${index}.value`, { required: true })}
+            />
+          ))}
+
+          <button
+            onClick={() =>
+              append({
+                value: '',
+              })
+            }
+          >
+            Append
+          </button>
+
+          <p>{isValid ? 'valid' : 'invalid'}</p>
+        </div>
+      );
+    };
+
+    render(<App />);
+
+    await waitFor(() => {
+      screen.getByText('valid');
+    });
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      screen.getByText('invalid');
+    });
+  });
 });

src/logic/createFormControl.ts

@@ -924,6 +924,7 @@ export function createFormControl<
     const disabledIsDefined = isBoolean(options.disabled);
 
     set(_fields, name, {
+      ...(field || {}),
       _f: {
         ...(field && field._f ? field._f : { ref: { name } }),
         name,

src/useFieldArray.ts

@@ -97,15 +97,14 @@ export function useFieldArray<
   const _fieldIds = React.useRef(fields);
   const _name = React.useRef(name);
   const _actioned = React.useRef(false);
-  React.useRef(
-    props.rules &&
-      (control as Control).register(name as InternalFieldName, props.rules),
-  );
 
   _name.current = name;
   _fieldIds.current = fields;
   control._names.array.add(name);
 
+  props.rules &&
+    (control as Control).register(name as InternalFieldName, props.rules);
+
   const callback = React.useCallback(
     ({
       values,