creating a reusable styled form component

type FormProps = HTMLAttributes<HTMLFormElement> & {
  formOptions: FormOptions<Record<string, unknown>, typeof zodValidator>;
};

type FormTextInputProps = HTMLAttributes<HTMLInputElement> & {
  name: string;
  label: string;
};

type FormComponentProps = ForwardRefExoticComponent<FormProps> & {
  TextInput: ForwardRefExoticComponent<FormTextInputProps>;
};
type FormContextProps = FormApi<Record<string, unknown>, typeof zodValidator>;

const FormContext = createContext<FormContextProps>({} as FormContextProps);

const Form = forwardRef<HTMLFormElement, FormProps>(
  ({ className, formOptions, ...props }, ref) => {
    const HeadlessForm = useForm({
      validatorAdapter: zodValidator,
      ...formOptions,
    });

    return (
      <FormContext.Provider value={HeadlessForm}>
        <HeadlessForm.Provider>
          <form
            className={className}
            onSubmit={(e) => {
              e.preventDefault();
              e.stopPropagation();
              void HeadlessForm.handleSubmit();
            }}
            ref={ref}
            {...props}
          />
        </HeadlessForm.Provider>
      </FormContext.Provider>
    );
  },
) as FormComponentProps;