fix(react-form): add display name to components for better debugging (#1491)

* feat(react-form): add `displayName` to `<AppForm>` & `<AppField>`

* Stop assigning `.displayName`

* Add name to `<Subscribe>`

Author: kidonng

packages/react-form/src/createFormHook.tsx

@@ -270,15 +270,16 @@ export function createFormHook<
     const form = useForm(props)
 
     const AppForm = useMemo(() => {
-      return (({ children }) => {
+      const AppForm = (({ children }) => {
         return (
           <formContext.Provider value={form}>{children}</formContext.Provider>
         )
       }) as ComponentType<PropsWithChildren>
+      return AppForm
     }, [form])
 
     const AppField = useMemo(() => {
-      return (({ children, ...props }) => {
+      const AppField = (({ children, ...props }) => {
         return (
           <form.Field {...props}>
             {(field) => (
@@ -302,6 +303,7 @@ export function createFormHook<
         TSubmitMeta,
         TComponents
       >
+      return AppField
     }, [form])
 
     const extendedForm = useMemo(() => {

packages/react-form/src/useForm.tsx

@@ -193,7 +193,7 @@ export function useForm<
     extendedApi.Field = function APIField(props) {
       return <Field {...props} form={api} />
     }
-    extendedApi.Subscribe = (props: any) => {
+    extendedApi.Subscribe = function Subscribe(props: any) {
       return (
         <LocalSubscribe
           form={api}