Pre-bound Field Components are not typesafe ? (React)

[atersolis]

I was trying to follow this guide on "Form Composition".
Did I miss something or are pre-bound Field Components not typesafe ?
In the example below I can use NumberField with an email field.
Actually I don't see how it could be typesafe since we don't expose a number type in the NumberField component interface.
What's the best way to have typesafe reusable components like NumberField right now ?

import { createFormHook, createFormHookContexts } from "@tanstack/react-form";

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

const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    NumberField: NumberField,
  },
  formComponents: {},
});

export const ExampleForm = () => {
  const form = useAppForm({
    defaultValues: {
      email: "",
    },
  });

  return (
    <form.AppForm>
      <form.AppField name="email">
        {/* Should raise an error since NumberField expect a number and email is a string */}
        {(field) => <field.NumberField label="Email" />}
      </form.AppField>
    </form.AppForm>
  );
};

export { useAppForm };

[crutchcorn]

You can do this actually very easily yourself by adding a value field that goes unused:

import { createFormHook, createFormHookContexts } from "@tanstack/react-form";

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

const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    NumberField: NumberField,
  },
  formComponents: {},
});

export const ExampleForm = () => {
  const form = useAppForm({
    defaultValues: {
      email: "",
    },
  });

  return (
    <form.AppForm>
      <form.AppField name="email">
        {/* Should raise an error since NumberField expect a number and email is a string */}
        {(field) => <field.NumberField label="Email" value={field.state.value} />}
      </form.AppField>
    </form.AppForm>
  );
};

export { useAppForm };