Ошибка: «Необнаруженное инвариантное нарушение: обработано меньше хуков, чем ожидалось». Даже при использовании условных выражений внутри useEffect ()

Question

У меня есть компонент, который повторно используется в заголовке всех моих страниц при использовании функции поиска кнопки с текстом: «ПОИСК FOO» и перенаправления со следующей js на следующую страницу. Я получаю ошибку:

react-dom.development.js:16393 Uncaught Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:16644:26
    at renderWithHooks (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:16647:5)
    at updateFunctionComponent (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:18535:20)
    at updateSimpleMemoComponent (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:18473:10)
    at beginWork$1 (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:20426:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:613:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:662:16)
    at invokeGuardedCallback (http://localhost:3000/_next/static/development/dll/dll_8fd2d00a320a15cf8e5e.js?ts=1578485992787:717:31).....

Это код для:

  const MyForm = (props) => {

  const { executeRecaptcha } = useGoogleReCaptcha();
  const router = useRouter();

  const { recordCheckStore } = useStores();
  const [recordCheckStatus, setRecordCheckStatus] = useState(null);
  const [fetchVin, setFetchVin] = useState(false);
  const [vin, setVin] = useState("");
  const [recaptchaToken, setRecaptchaToken] = useState("");


  const getRecaptcha = async () => {
    try {
      const result = await executeRecaptcha("vinsearch");
      setRecaptchaToken(result);
    } catch (e) {
      setRecaptchaToken("");
    }
  };
  const onSearchVin = async () => {
    setRecordCheckStatus("fetching");
    await recordCheckStore.fetchRecordCheck(vin, recaptchaToken);
    setRecordCheckStatus(recordCheckStore.recordCheck ? "successful" : "failed");
    setFetchVin(false);
  };

  useEffect(() => {      
    if (recaptchaToken === "" && fetchVin) {
      getRecaptcha();
    }

    if (recordCheckStatus === "successful") {
      router.push(`/preview`);
    }

    if (fetchVin && recaptchaToken) {
      onSearchVin();
    }

  }, [fetchVin, recaptchaToken]);

  return (
    <div>
      <div>
        <input onChange={(e) => setVin(e.target.value)} />
        <input value={recaptchaToken}/>
        <button onClick={() => setFetchVin(true)}>
          SEARCH FOO
        </button>
      </div>
    </div>
  );
};

Я использую условные выражения внутри useEffect, поэтому я не уверен, почему я получаю ошибку:

Кстати:

Я также использую хранилище mobx для RecordCheckStore, которое выглядит следующим образом:

class RecordCheckStore extends Store {
  @observable
  public recordCheck: IRecordCheckResponse;

  @observable
  public status: "fetching" | "successful" | "failed" | null = null;

  constructor() {
    super();

    this.setRecordCheck = this.setRecordCheck.bind(this);
    this.fetchRecordCheck = this.fetchRecordCheck.bind(this);
    this.setStatus = this.setStatus.bind(this);
  }

  @action
  public async fetchRecordCheck(vin: string, recaptchaToken: string) {
    try {
      this.setRecordCheck(undefined);
      this.status = ("fetching");
      const res = await BackendApi.recordCheck(vin, recaptchaToken);
      this.setRecordCheck(res);
      this.status = ("successful");
    } catch (e) {
      this.status = ("failed");
      return e;
    }
  }

  @action
  public setStatus(status: "fetching" | "successful" | "failed" | null = null) {
    this.status = status;
  }

  @action
  public setRecordCheck(rc: IRecordCheckResponse) {
    this.recordCheck = rc;
    this.setStatus("successful");
  }
}