What is the right way to use withForm with reusable field components?

[uzakovnikita]

Hello! I tried to implement reusable NameField form component using withForm HOC as shown in the code

// hooks.ts
import { createFormHook, createFormHookContexts  } from "@tanstack/react-form";
import { TextField } from "./TextField ";

export const { fieldContext, formContext, useFieldContext } =
  createFormHookContexts();

export const { useAppForm, withForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    TextField,
  },
  formComponents: {},
});


// form.tsx
import { useAppForm } from './hooks.ts'

export const Form = () => {
  const formLib = useAppForm({
    defaultValues: {
      name: "",
      phone: '',
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });
  return (
    <form>
      // here is typescript error
      <NameField form={formLib} />
    </form>
  );
}


// this is the component that I tried to implements and had my problems with
// NameField.tsx
import { withForm } from "./hooks.ts";

export const NameField = withForm({
  defaultValues: {
    name: "",
  },
  render: function Render({ form }) {
    return (
      <div>
        <form.AppField
          name="name"
        >
          {(field) => (
            <>
              <field.TextField label="Name" />
            </>
          )}
        </form.AppField>
      </div>
    );
  },
});


// TextField.tsx
import { useFieldContext } from "./hooks.ts";

export function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();
  
  return (
    <label>
      <div>{label}</div>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  );
}

And in this case i have typescript error: For solve this error i have to define phone in defaultValue field:

export const NameField = withForm({
 defaultValues: {
   name: "",
   // this solve ts error
   phone: "",
 },
 render: function Render({ form }) {
   return (
     <div>
       <form.AppField
         name="name"
         validators={{
           onBlur: clientNameSchema,
         }}
       >
         {(field) => (
           <>
             <field.TextField label="Name" />
           </>
         )}
       </form.AppField>
     </div>
   );
 },
});

But it seems not right way. Please tell me how to avoid this error. Thank you!