Недопустимое свойство всегда ложно при первом рендеринге, реагирующая форма 7

Я разрабатываю настройку мастера для компании, в которой я работаю, этот мастер будет использоваться для входа в систему, когда пользователь попытается создать учетную запись.

Для каждого шага я условно отображаю разные входные данные, когда входные данные фактического шага настройки действительны, пользователь может перейти к следующему шагу.

Чтобы достичь этого, мне нужно знать, является ли недопустимое свойство входных данных или входных данных на текущей странице ложным, для этого я использую форму хука реакции ^ 7.43.9 и getFieldState хука useForm.

Проблема в том, что недопустимое свойство всегда ложно при первом рендеринге, оно должно быть истинным при первом рендеринге.

Я упростил код для вас, этот код только проверяет, является ли firstName.invalid (строка: 15) ложным, если оно ложно, пользователь может продолжить, если нет, пользователь должен повторить попытку.

Проверка для firstName составляет минимум 3 символа, и это необходимо, если вы нажмете кнопку без значения, вы сможете перейти к следующему шагу, и это неправильно, потому что правила проверки никогда не применяются.

Есть ли способ сделать недопустимым значение true при первом рендеринге?

Есть ли другой способ узнать, действительны ли текущие входы?

Вот код:

import { useState } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const [step, setstep] = useState(1);
  const {
    register,
    getFieldState,
    // I subscribed to errors as the documentation says
    formState: { errors },
  } = useForm({
    mode: "onChange",
  });

  const handleStep = () => {
    const firstName = getFieldState("firstName");
    if (firstName.invalid) {
      alert("oh no, invalid is true, so try again");
    } else {
      alert("excelente, invalid is false, so you can go next step");
    }
  };

  return (
    <form style = {{ padding: "1rem" }}>
      <h1>Step 1</h1>
      <input {...register("firstName", { required: true, min: 3 })} />
      <button type = "button" onClick = {() => handleStep()}>
        Continue
      </button>
    </form>
  );
}

Вы можете попробовать это на codeandbox:

https://codesandbox.io/s/upbeat-jennings-vbz1vf?file=/src/App.tsx

Это ссылка на документацию о том, как использовать getFieldState

https://react-hook-form.com/api/useform/getfieldstate/

я ценю вашу помощь