DevTool error in console when appending to Field Array

Start with the linked CodeSandbox, open the developer console, and click “Add Project” to reproduce and capture the missing error details. Trace the DevTool behavior triggered by appending to the field array and verify that the same action produces no console error when the issue is resolved.

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/young-dust-9752gj?file=%2Fsrc%2FApp.js

Steps to reproduce

1. Go to Code Sandbox
2. Open up Dev Tools console
3. Click on 'Add Project' button

Expected behaviour

There should be no errors:

import {
  useForm,
  FormProvider,
  useFormContext,
  useFieldArray,
} from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

import { ErrorMessage } from "@hookform/error-message";
import { DevTool } from "@hookform/devtools";

const validationSchema = yup.object().shape({
  firstName: yup.string().required("First Name is required"),
  Projects: yup.array().of(
    yup.object().shape({
      name: yup.string().required("Project title required"),
    })
  ),
});

export default function FormPage() {
  const methods = useForm({
    defaultValues: {
      firstName: "",
      Projects: [{ name: "" }],
    },
    resolver: yupResolver(validationSchema),
  });

  const { handleSubmit, control } = methods;
  const { fields, append } = useFieldArray({
    name: "Projects",
    control,
  });

  return (
    <>
      <div>
        <FormProvider {...methods}>
          <form
            onSubmit={handleSubmit(
              (data) => console.log("Valid", data),
              (errors) => console.log("NOT valid", errors)
            )}
          >
            <div>
              <h1>Form</h1>
              <InputField
                title="First Name"
                id="firstName"
                placeholder="Jhon"
              />

              {fields.map((field, index) => (
                <div
                  key={field.id}
                  style={{
                    paddingLeft: "25px",
                    marginTop: "15px",
                    marginBottom: "15px",
                  }}
                >
                  <InputField
                    id={`Projects.${index}.name`}
                    title={`Project ${index + 1}`}
                  />
                </div>
              ))}
              <div style={{ paddingLeft: "25px", marginBottom: "15px" }}>
                <button type="button" onClick={() => append({ name: "" })}>
                  Add Project
                </button>
              </div>

              <button type="submit">Submit</button>
            </div>
          </form>
        </FormProvider>
        <DevTool control={methods.control} />
      </div>
    </>
  );
}

const InputField: React.FC<{
  id: string,
  title: string,
  type?: string,
  placeholder?: string,
}> = ({ id, title, type, placeholder }) => {
  const {
    register,
    formState: { errors },
  } = useFormContext();
  const inputType = type ? type : "text";
  return (
    <div>
      <label style={{ display: "block" }}>{title}</label>
      <input
        id={id}
        type={inputType}
        {...register(id)}
        placeholder={placeholder}
      />
      <ErrorMessage
        errors={errors}
        name={id}
        render={({ message }) => <div style={{ color: "red" }}>{message}</div>}
      />
    </div>
  );
};

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct