React-Hook-Forms and Ionic - How to submit a form using button outside of the form

Question

How can we trigger form submit outside of the form using react-hook-form and ionic. I believe we can do it using form attribute on the button but Ionic button doesn't allow form attribute on the IonButton

the below code worked in chrome initially and stopped working all of a sudden and also this code is not working on safari browser. looks like Ionic will release the form attribute on the button but till we get the form attribute addressed on the Ionic button, i am trying to get a workaround that will work on all browsers

const DynTest: React.FC<FormProps> = (props) => {

  const formRef = useRef<HTMLFormElement>(null);    
  const { control, handleSubmit, errors, reset, formState } = useForm({
    defaultValues: {},
    mode: "onChange",
  });

  const { fields, append, remove  } = useFieldArray({
    control,
    name: "data"
  });

  const onReset = () => {
    reset({});
  };

  const onSubmit = (data: any) => {
    console.log(data);
  };

  const submitForm = (flag: boolean) => {
    console.log("inside submit form");
    //Check if requestSubmit() is available to current browser
    if (formRef!.current!.requestSubmit) {
      formRef!.current!.requestSubmit();
    }
    //If not, perform constraint validation and call submit function directly
    else {
      console.log("inside submit form else");
      if (formRef!.current!.reportValidity()) {
        handleSubmit(onSubmit);
      }
    }
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>React Hook Form</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <p>Details</p>
        <form onSubmit={handleSubmit(onSubmit)} ref={formRef}>
          <IonItem>
            <IonLabel>Gender</IonLabel>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonSelect placeholder="Select One" onIonChange={onChange}>
                  <IonSelectOption value="FEMALE">Female</IonSelectOption>
                  <IonSelectOption value="MALE">Male</IonSelectOption>
                </IonSelect>
              )}
              control={control}
              name="gender"
              rules={{ required: "This is a required field" }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="gender"
            as={<div style={{ color: "red" }} />}
          />

          <IonItem>
            <IonLabel>Email</IonLabel>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonInput onIonChange={onChange} />
              )}
              control={control}
              name="email"
              rules={{
                required: "This is a required field",
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                  message: "invalid email address",
                },
              }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="email"
            as={<div style={{ color: "red" }} />}
          />
          <IonItem>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <IonRange
                  min={-200}
                  max={200}
                  color="secondary"
                  onIonChange={onChange}
                >
                  <IonLabel slot="start">-200</IonLabel>
                  <IonLabel slot="end">200</IonLabel>
                </IonRange>
              )}
              control={control}
              name="rangeInfo"
              rules={{ required: "Please Select A Value" }}
            />
          </IonItem>
          <ErrorMessage
            errors={errors}
            name="rangeInfo"
            as={<div style={{ color: "red" }} />}
          />
        </form>
      </IonContent>
      <div>
        <IonButton onClick={onSubmit}>submit</IonButton>
      </div>
      <div>
        <IonButton onClick={onReset}>Reset</IonButton>
      </div>
    </IonPage>
  );
};

export default DynTest;