form composition with custom validation

            <form.Field
              name="name"
              validators={{
                onSubmit: ({ value }) => {
                  const parsed = createUserSchema
                    .pick({ name: true })
                    .safeParse({ name: value })

                  return parsed.error?.issues
                },
              }}
            >
              {(field) => (
                <Field>
                  <FieldLabel htmlFor="name">Name</FieldLabel>
                  <Input
                    id="name"
                    value={field.state.value}
                    placeholder="Enter name..."
                    required
                    onChange={(e) => field.handleChange(e.target.value)}
                    onBlur={field.handleBlur}
                  />
                  <FieldError errors={field.state.meta.errors} />
                </Field>
              )}
            </form.Field>