Allow to avoid wrapping every fieldComponent with AppField

[MistyKuu]

I'd like to do this:

<Form.TextInput fieldName={"name"} labelText="Name" />

instead of

<form.AppField name={"name"}>
        {(field) => <field.TextInput labelText="Name" />}
      </form.AppField>

I was able to implement it with proper typing but avoiding fieldComponents.

export const useAppForm = <
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta = never,
>(
  options: FormOptions<
    TFormData,
    TOnMount,
    TOnChange,
    TOnChangeAsync,
    TOnBlur,
    TOnBlurAsync,
    TOnSubmit,
    TOnSubmitAsync,
    TOnServer,
    TSubmitMeta
  >
) => {
  const form = useAppFormTanStack(options);

  const id = useId();

  useEffect(() => {
    form.baseStore.setState((s) => ({ ...s, id }));
  }, []);

  const FieldWrapper =
    <TProps extends {}>(Component: React.ComponentType<TProps>) =>
    ({
      fieldName,
      mode,
      ...rest
    }: TProps & {
      fieldName: DeepKeys<TFormData>;
      mode?: "array";
    }) => {
      return (
        <form.AppField name={fieldName} mode={mode}>
          {() => <Component {...(rest as any)} />}
        </form.AppField>
      );
    };

  const Fields = {
    TextInput: useMemo(() => FieldWrapper(TextInputField), []),
    SelectInput: useMemo(() => FieldWrapper(SelectField), []),
    MultiSelect: useMemo(() => FieldWrapper(MultiSelectField), []),
    CheckBox: useMemo(() => FieldWrapper(CheckBoxField), []),
    RadioButtonGroup: useMemo(() => FieldWrapper(RadioButtonGroupField), []),
    NumberInput: useMemo(() => FieldWrapper(NumberInputField), []),
    TextArea: useMemo(() => FieldWrapper(TextAreaField), []),
    DatePicker: useMemo(() => FieldWrapper(DatePickerField), [])
  };

  return { form, Fields };
};

Can we support it natively with fieldComponents?

usage:

<Fields.TextInput fieldName={"name"} labelText="Name" />