react-hook-form'on Submit'函数代码没有执行

如果一个表单提交成功，我想调用onSubmit 函数。

验证工作正常，但onSubmit 函数没有被调用，也没有显示错误，所以我无法找出问题所在。

这就是导致问题的onSubmit 函数：

 const onSubmit: SubmitHandler<Props> = (data) => console.log("testing");

我是用这一行来调用它的：

<form onSubmit={handleSubmit(onSubmit)} ref={form}>

我正在使用 react-hook-form 库和 yup 来验证表单。我也在使用react和typescript。

这是代码的其余部分：

import React, { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { string, number, object, InferType } from "yup";

function onSubmit(values: Props) {}

type Props = InferType<typeof schema>;

const schema = object({
  firstName: string().required("First name is required"),
});

function FormEmail() {
  const form = useRef(null);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Props>({
    resolver: yupResolver(schema),
  });

 const onSubmit: SubmitHandler<Props> = (data) => console.log("testing");

return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} ref={form}>

            <h3>First Name</h3>
            <input
              id="firstName"
              type="text"
              {...register("firstName")}
            />
            <span className="error">{errors?.firstName?.message}</span>

            <button className="" type="submit">
              Submit
            </button>
      </form>
    </div>
  );
}

export default FormEmail;