многоэтапная форма реакции с неправильной проверкой

Пишу здесь свою проблему как новую часть.

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

Итак, моя многоступенчатая форма работает нормально, переходить туда и обратно - это нормально, но я должен передать поля в основной компонент, чтобы он мог проверить правильность, и я тоже передаю этот пароль

Вот и проблема

Когда я передаю поле password, также требуется проверка, даже когда я нажимаю автоматически сгенерированный пароль

Я передаю такие поля fields: ["uname", "email", "password"], //to support multiple fields form

поэтому даже не проверяйте, позвольте мне создать пароль, это требует проверки.

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

Мне это надоело, я много чего пробовал, но не работал, вот мой код

    import React, { useState, useEffect } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";
import { useForm } from "react-hook-form";

    function MainComponent() {
      const { register, triggerValidation, errors, getValues } = useForm();
      const [defaultValues, setDefaultValues] = useState({});
    
      const forms = [
        {
          fields: ["uname", "email", "password"], //to support multiple fields form
          component: (register, errors, defaultValues) => (
            <Form1
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        },
        {
          fields: ["lname"],
          component: (register, errors, defaultValues) => (
            <Form2
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        },
        {
          fields: [""],
          component: (register, errors, defaultValues) => (
            <Form3
              register={register}
              errors={errors}
              defaultValues={defaultValues}
            />
          )
        }
      ];
    
      const [currentForm, setCurrentForm] = useState(0);
    
      const moveToPrevious = () => {
        setDefaultValues(prev => ({ ...prev, ...getValues() }));
    
        triggerValidation(forms[currentForm].fields).then(valid => {
          if (valid) setCurrentForm(currentForm - 1);
        });
      };
    
      const moveToNext = () => {
        setDefaultValues(prev => ({ ...prev, ...getValues() }));
        triggerValidation(forms[currentForm].fields).then(valid => {
          if (valid) setCurrentForm(currentForm + 1);
        });
      };
    
      const prevButton = currentForm !== 0;
      const nextButton = currentForm !== forms.length - 1;
      const handleSubmit = e => {
        console.log("whole form data - ", JSON.stringify(defaultValues));
      };
      return (
        <div>
          <div class="progress">
            <div>{currentForm}</div>
          </div>
    
          {forms[currentForm].component(
            register,
            errors,
            defaultValues[currentForm]
          )}
    
          {prevButton && (
            <button
              className="btn btn-primary"
              type="button"
              onClick={moveToPrevious}
            >
              back
            </button>
          )}
          {nextButton && (
            <button className="btn btn-primary" type="button" onClick={moveToNext}>
              next
            </button>
          )}
    
          {currentForm === 2 && (
            <button
              onClick={handleSubmit}
              className="btn btn-primary"
              type="submit"
            >
              Submit
            </button>
          )}
        </div>
      );
    }
    
    export default MainComponent;

пожалуйста, проверьте мою песочницу кода здесь, вы можете найти полный рабочий код Песочница кода