How to set isSubmitted to false after each submission in a multistep form?

[ShahriarKh]

How can I change the value of isSubmitted for multistep forms?
I'm trying to change the appearance of inputs (show red border for invalid and green border for valid inputs) based on the state of form, but since the form is multistep, the isSubmitted remains true after first step.
Is there a way to reset it? I tried methods.reset({}, { keepValues: true }); but no luck.

Per docs:

isSubmitted | boolean | Set to true after the form is submitted. Will remain true until the reset method is invoked.

codesandbox: https://codesandbox.io/s/optimistic-kate-9kjx9d?file=/src/App.js

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

export default function App() {
  const {
    handleSubmit,
    formState: { isSubmitted, submitCount },
    register,
    reset
  } = useForm();

  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    {
      inputs: <input {...register("zero")} />
    },
    {
      inputs: <input {...register("one")} />
    },
    {
      inputs: <input {...register("two")} />
    },
    {
      inputs: <input {...register("three")} />
    }
  ];

  function onSubmit(data) {
    console.log(data);
    setCurrentStep((currentStep) => currentStep + 1);
    reset(
      {},
      {
        keepValues: true
      }
    ); // should set submitted to false
  }

  return (
    <>
      <p>step: {currentStep}</p>
      <p>isSubmitted: {isSubmitted.toString()}</p>
      <p>submit count: {submitCount}</p>

      <form onSubmit={handleSubmit(onSubmit)}>
        {steps[currentStep].inputs}
        <br />
        <button type="submit">go to next step</button>
      </form>
    </>
  );
}

[Moshyfawn]

Try passing your current step values + the default values of the other steps to the first reset argument to get the behavior you want. Something like

const { reset, getValues } = useForm()

reset({ ...getValues(), step2Field1: "" })

[ShahriarKh]

What if I don't have defaultValues? I'm using <FormProvider> and the children inputs (controlled) are dynamic. The problem is, when the step of the form changes, the FormProvider is still there and somehow can't detect which fields were submitted.

I tried to call reset on step change. It does reset the values if I don't pass keepValues, so I guess the function gets called correctly, but the isSubmitted state of the form remains unchanged.

<FormProvider>
    {inputs based on current step}
</FormProvider>

[Moshyfawn]

How do you access the isSubmitted state? formState is a Proxy object (a performance optimization), so you need to read the value first before it becomes reactive (see docs for more info)

formState is wrapped with a Proxy to improve render performance and skip extra logic if specific state is not subscribed to. Therefore make sure you invoke or read it before a render in order to enable the state update.

const { isSubmitted } = formState // INFO: destructure a specific form state to subscribe to the value

[ShahriarKh]

I updated my question with a minimal example.

[ShahriarKh]

bump