Почему перекидывает на другое поле в react-hook-form?

Question

[delta_pr0]

у меня есть две формы: login и register. В login все работает хорошо, но в register когда я ввожу 1 символ в input меня перекидывает на следующее поле, изначально я думал то что проблема в pattern, но я их убрал и проблема не прошла. В интернете нету ответа на эту тему. Помогите пожалуйста

register.tsx

import { Link } from "react-router-dom"
import styles from "./Register.module.scss"
import { FC, useContext } from "react"
import { Context } from "../../main"
import { observer } from "mobx-react-lite"
import { SubmitHandler, useForm } from "react-hook-form"
import IRegister from "../../interfaces/forms/register/Register"

const Register:FC = ():JSX.Element => {
  const {store} = useContext(Context)

  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<IRegister>()

  const onSubmit:SubmitHandler<IRegister> = async data => {
    store.register(data.username, data.email, data.password)
  }

  return (
    <>
    
      <div className={styles.register}>
        <div className={styles.form}>
          <form onChange={handleSubmit(onSubmit)}>
            <h2>Создать учетную запись</h2>
            <div className={errors.email?.message ? styles.input_error : styles.input}>
              <p>Email{errors.email?.message ? <span> - {errors.email?.message}</span> : ""}</p>
              <input type="email" {...register("email", {
                required: true,
              })} />
            </div>
            <div className={errors.username?.message ? styles.input_error : styles.input}>
              <p>Отображаемое имя{errors.username?.message ? <span> - {errors.username?.message}</span> : ""}</p>
              <input type="text" {...register("username", {
                required: true,
              })} />
            </div>
            <div className={errors.password?.message ? styles.input_error : styles.input}>
              <p>Пароль{errors.password?.message ? <span> - {errors.password?.message}</span> : ""}</p>
              <input type="password" {...register("password", {
                required: true,
              })} />
            </div>
            <div className={styles.checkbox}>
              <input type="checkbox" />
              <p>Я не против получать  электронные письма с новостями discord, советами и специальными предложениями. От рассылки можно отписаться в любое время</p>
            </div>
            <div className={styles.button}>
              <button type="submit" disabled={!isValid}>Продолжить</button>
              <p>Регистрируясь, вы соглашаетесь с <Link to="/">Условиями использования</Link> и <Link to="/">Политикой конфидициальности</Link> Discord</p>
            </div>
            <div className={styles.login_link}>
              <Link to="/login">Уже зарегистрированы?</Link>
            </div>
          </form>
        </div>
      </div>
    
    </>
  )
}

export default observer(Register)

Answer 1

[sealCoder]

Возможно, дело в том, что в <form onChange={handleSubmit(onSubmit)}> используется onChange, а не onSubmit