🐞 fix #5229 issue with ref become undefined (#5233)

src/__tests__/controller.test.tsx

@@ -995,4 +995,43 @@ describe('Controller', () => {
 
     expect(watchedValue).toMatchSnapshot();
   });
+
+  it('should set ref to empty object when ref is not defined', () => {
+    const App = () => {
+      const [show, setShow] = React.useState(false);
+      const { control } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+          test: {
+            firstName: '',
+            lastName: '',
+          },
+        },
+      });
+
+      return (
+        <div>
+          {show && (
+            <Controller
+              name={'test'}
+              rules={{ required: true }}
+              control={control}
+              render={({ field }) => (
+                <input value={field.value as any} onChange={field.onChange} />
+              )}
+            />
+          )}
+          <button onClick={() => setShow(!show)}>setShow</button>
+        </div>
+      );
+    };
+
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'test' },
+    });
+  });
 });

src/useForm.ts

@@ -968,7 +968,7 @@ export function useForm<
           ...(isInitialRegister
             ? { ref: { name } }
             : {
-                ref: (get(fieldsRef.current, name)._f || {}).ref,
+                ref: (get(fieldsRef.current, name)._f || {}).ref || {},
                 ...get(fieldsRef.current, name)._f,
               }),
           name,