Programmatic submit does not work, but gets console log works

My problem is that I am trying to call a programmatic submit but it does not work, both of the console logs onClick show up in the onConfirm method, but the console log in onSubmit does not work at all! Please help out. It seems this is the correct way to implement this

I have 3 classes, I am using a button from a material ui Dialog, I want to use it the child button component

export const CustomDialog = () => {
  const {
    confirmAction,
  } = useDialog();

  return (
    <Dialog>
          <Button
            type="submit"
            onClick={confirmAction}
          >
            Confirm
          </Button>
        )}
    </Dialog>
  );
};

export const CreateRecipeButton = () => {
  const { openConfirmation } = useDialog();
  const formRef = useRef<HTMLFormElement | null>(null);

  const onConfirm = () => {
    console.log('ON CONFIRM');
    if (formRef.current) {
      console.log('Dispatching submit');

      formRef.current.dispatchEvent(
        new Event('submit', { cancelable: true, bubbles: true })
      );
    }
  };

  const handleOpenDialog = () => {
    openConfirmation({
      body: <RecipeForm formRef={formRef} />,
    });
  };

  return (
    <Button
      onClick={handleOpenDialog}
    >
      Add Recipe
    </Button>
  );
};

export const RecipeForm = ({
  formRef,
}: {
  formRef: MutableRefObject<HTMLFormElement | null>;
}) => {
  const {
    control,
    watch,
    formState: { errors },
    handleSubmit,
  } = useForm<FormValues>({
    values: {
      recipe: recipe?.full|| '',
    },
    resolver: yupResolver<FormValues>(createRecipeSchema),
    mode: 'onBlur',
    reValidateMode: 'onBlur',
  });



  const onSubmit = async (values: FormValues) => {
    console.log('ON SUBMIT'); // NOT GOING IN THIS METHOD AD ALL
    try {
      console.log(values);
    } catch (error) {
      toast.error(error);
    }
  };


  return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
    //inputs