Form fixes

packages/ui/form/fields.tsx

@@ -1,5 +1,5 @@
 import { useId } from "@radix-ui/react-id";
-import { forwardRef, ReactElement, ReactNode, Ref } from "react";
+import React, { forwardRef, ReactElement, ReactNode, Ref } from "react";
 import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
@@ -179,7 +179,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
   );
 });
 
-type FormProps<T> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
+type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
   JSX.IntrinsicElements["form"],
   "onSubmit"
 >;
@@ -199,7 +199,25 @@ const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLForm
             });
         }}
         {...passThrough}>
-        {props.children}
+        {
+          /* @see https://react-hook-form.com/advanced-usage/#SmartFormComponent */
+          React.Children.map(props.children, (child) => {
+            return typeof child !== "string" &&
+              typeof child !== "number" &&
+              typeof child !== "boolean" &&
+              child &&
+              "props" in child &&
+              child.props.name
+              ? React.createElement(child.type, {
+                  ...{
+                    ...child.props,
+                    register: form.register,
+                    key: child.props.name,
+                  },
+                })
+              : child;
+          })
+        }
       </form>
     </FormProvider>
   );