Problem with typescript "Type of property 'children' circularly references itself in mapped type"

[lordenas]

I have a type that refers to itself. This is a simple tree. When I try to add such a type to react-hook-form, I get an error. How can this be fixed?

Type of property 'path' circularly references itself in mapped type '{ [K in keyof SegmentatorCategory]: IsPrimitive<SegmentatorCategory[K]> extends true ? K & string : (K & string) | ${K & string}.${FieldPath<...>}; }'

import * as React from "react";
import { render } from "react-dom";
import { useForm } from "react-hook-form";

interface SegmentatorCategory {
  children: SegmentatorCategory[];
  path?: SegmentatorCategory[];
}

type FormData = {
  firstName: string;
  lastName: string;
  campaignCardSegment: SegmentatorCategory;
};

export default function App() {
  const {
    register,
    setValue,
    handleSubmit,
    formState: { errors }
  } = useForm<FormData>();
  const onSubmit = handleSubmit(({ firstName, lastName }) => {
    console.log(firstName, lastName);
  });

  return (
    <form onSubmit={onSubmit}>
      <label>First Name</label>
      <input {...register("firstName")} /> //type ERROR
      <label>Last Name</label>
      <input {...register("lastName")} />
      <button
        type="button"
        onClick={() => {
          setValue("lastName", "luo"); 
        }}
      >
        SetValue
      </button>
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

I also prepared an example in which the error is visible on line 32.
https://codesandbox.io/s/react-hook-form-typescript-forked-7ujq3?file=/src/index.tsx

[Moshyfawn]

I'd say, it's a design limitation of this lib atm. See #4704 and #4670 for more information

[damikun]

When You have issues in set function you can use structuredClone(object) to workeround i.... it will create clon and pass clon to it...