My react-hook-form's handleSubmit function in Typescript keep reloading the page and not return the results

I copy the exact code from react-hook-form document like this

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  firstName: string;
  lastName: string;
  email: string;
};

export default function TestForm() {
  const { register, handleSubmit } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);

  return (
    <form onSubmit={void handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  );
}

I changed nothing except for the void keyword before handleSubmit function so there is no more error on typescript, the console should log out what I typed to input, but no it doesn't, the page just reload and nothing showed up in the console. I tried to change it by putting event.preventDefault like this

    <form
      onSubmit={(e) => {
        handleSubmit(onSubmit);
        e.preventDefault();
      }}
    >

and it helped to prevent the page from reloading, but there is still nothing logged out, I'm really confused since no one mention this error before, appreciate any help.

edit: If I remove the void keyword, it will show this error

Okay, I found out the error. It turns out that I need to disable the eslint rule for allowing void return, so I went to .eslintrc.cjs file and add this line to the rules:

 "@typescript-eslint/no-misused-promises": [
      2,
      {
        "checksVoidReturn": {
          "attributes": false
        }
      },
    ]

Now it works!