form-spike.tsx

component.tsx

const Form = ({ onSubmit, ...props }) => {
  const formBag = useForm(props);

  return (
    <form onSubmit={formContext.handleSubmit(onSubmit)}>
      <FormProvider value={formBag}>{children}</FormProvider>
    </form>
  );
};

type FieldProps = {
  label: string;
  name: string;
}

const Field = ({ label, name }: FieldProps) => {
  const { register, getValues } = useFormContext();

  const values = getValues(name);

  return (
    <>
      <label>{label}</label>
      <input {...register(name as FieldPath<typeof values>)} />
    </>
  );
};

const schema = yup.schema()...;

const FieldValues = typeof schema;

const PurchaseLabelForm = () => {
  const defaultValues = schema.cast({});

  return (
    <Form
      onSubmit={(values) => console.log(values)}
      defaultValues={defaultValues}
    >
      <Field label="Name" name="name" />
    </Form>
  );
};