react-hook-form + zod

App.tsx

import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }).url(),
  age: z.coerce
    .number()
    .default(0)
    .refine(
      (value) => value >= 10,
      (value) => {
        return { message: `Expect value to be >= 10, but got ${value}` };
      }
    ),
});

const schemaResolver = zodResolver(schema);

interface IFields { name?: string; age?: number; deep: { name: string} }

const App = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<IFields>({
    resolver: schemaResolver,
    defaultValues: {
      name: '',
      age: 0,
    },
  });

  return (
    <div>
      <Controller
        control={control}
        name="name"
        render={({ field }) => {
          const value = field.value;
          return (
            <>
              <input {...field} />
              {errors.name?.message && <p>{errors.name?.message}</p>}
            </>
          );
        }}
      ></Controller>

      <Controller
        name="age"
        control={control}
        render={({ field }) => {
          return (
            <>
              <input type="number" {...field} />
              {errors.age?.message && <p>{errors.age?.message}</p>}
            </>
          );
        }}
      />

      <button
        onClick={async () => {
          handleSubmit(
            (d) => {
              console.log(d);
            },
            (e) => {
              console.error(e);
            }
          )();
        }}
      >
        Submit
      </button>
    </div>
  );
};

export default App;