issue: When using reValidateMode: 'onBlur', the form doesn't submit when its single error is fixed about react-hook-form HOT 6 CLOSED

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const { register, handleSubmit, formState } = useForm({
    mode: "onSubmit",
    reValidateMode: "onBlur",
  });
  const [blurState, setBlurState] = React.useState({})

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  const { onBlur, ...registerProps } = register('firstName', { required: true }); 

  const handBlurEvent = (e) => {
    onBlur(e)
    setBlurState(prevState => ({
      ...prevState,
      "firstName": true
    }))
  };

  const isValidState = blurState["firstName"] && !formState.isValidating && !formState.errors["firstName"]

  React.useEffect(() => {
    if(isValidState) {
      handleSubmit(onSubmit)()
      setBlurState(prevState => ({
        ...prevState,
        "firstName": false
      }))
    }
  }, [
    isValidState,
    onSubmit,
    handleSubmit
  ])

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        {formState.errors && formState.errors.firstName ? (
          <p>Enter a valid name</p>
        ) : null}
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            {...registerProps}
            onBlur={handBlurEvent}
          />
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);