DevTool error in console when appending to Field Array #207

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>
  );
};