Multi step form or conditional rendering with DevTool console get an error Cannot update a component (`FormItemTest`) while rendering a different component (`FormItemTest`). To locate the bad setState() call inside `FormItemTest`

[aurora-lch]

The collection of fields in react hook form meets expectations. Confirmed to be a bug in DevTool. when I annotate DevTool,no more errors reported.

this is example code

import {
  useForm,
  FormProvider
} from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { DevTool } from '@hookform/devtools';

import FormItemTest from '~/components/form/FormItemTest';

import {
  useState
} from 'react';

import * as z from 'zod';

const schema = z.object({
  step1: z.string(),
  step2: z.string()
});

function Step1() {
  return (
    <FormItemTest name='step1' />
  )
}

function Step2() {
  return (
    <FormItemTest name='step2' />
  )
}

function getStep(step: number) {
  switch (step) {
    case 0:
      return <Step1 />;
    case 1:
      return <Step2 />;
    default:
      return null;
  }
}

export default function Demo() {
  const [show, setShow] = useState(false);
  const [step, setStep] = useState(0);

  const methods = useForm({
    resolver: zodResolver(schema),
    mode: 'onChange'
  });

  const onSubmit = methods.handleSubmit(values => {
    console.log(values);
  });

  return (
    <div>
      <FormProvider {...methods}>
        <form>
          <Step1 />
          {show && <Step2 />}
          {getStep(step)}
        </form>
      </FormProvider>
      <DevTool control={methods.control} />
      <button onClick={() => setShow(s => !s)}>Toggle Step2</button>
      <button onClick={onSubmit}>Submit</button>
      <button onClick={() => setStep(s => s + 1)}>Next Step</button>
    </div>
  )
}