custom reusable form.Field component, trying to use Form Composition

import type { ZodObject, ZodRawShape } from "zod";
import LabeledField from "@/components/form/labeled-field";
import { isFieldRequired, useFormContext } from "@/components/form/utils";
import { Input } from "@/components/ui/input";

interface FieldInputProps {
  id: string;
  fieldName: string;
  label: string;
  schema: ZodObject<ZodRawShape>;
}

export default function FieldInput({ id, fieldName, label, schema }: FieldInputProps) {
  const form = useFormContext();

  return (
    <form.Field
      name={fieldName}
      children={({ state, handleChange, handleBlur }) => (
        <LabeledField labelFor={id} label={label} required={isFieldRequired(fieldName, schema)}>
          <Input id={id} value={state.value ?? ""} onChange={(e) => handleChange(e.target.value)} onBlur={handleBlur} />
        </LabeledField>
      )}
    />
  );
}

import type { ZodObject, ZodRawShape } from "zod";
import LabeledField from "@/components/form/labeled-field";
import { isFieldRequired, useFormContext } from "@/components/form/utils";
import { Input } from "@/components/ui/input";

interface FieldInputProps {
  id: string;
  fieldName: string;
  label: string;
  schema: ZodObject<ZodRawShape>;
}

export default function FieldInput({ id, fieldName, label, schema }: FieldInputProps) {
  const form = useFormContext();

  return (
    <form.Field
      name={fieldName}
      children={({ state, handleChange, handleBlur }) => (
        <LabeledField labelFor={id} label={label} required={isFieldRequired(fieldName, schema)}>
          <Input id={id} value={state.value ?? ""} onChange={(e) => handleChange(e.target.value)} onBlur={handleBlur} />
        </LabeledField>
      )}
    />
  );
}