the code:

const typ = t.Object({
  username: t.String({ minLength: 3, maxLength: 20 }),
  email: t.String({ format: 'email' }),
  password: t.String({ minLength: 8 }),
});

export default function SignUp() {
  const onSubmit = (data: typeof typ) => {
    console.log(data);
  };

  const form = useForm<typeof typ>({
    resolver: typeboxResolver(typ),
  });

  return (
    <main className={'flex justify-center items-center h-screen bg-no-repeat bg-cover bg-[url("/wave-haikei-2.svg")]'}>
      <Link href={'/'}>
        <ArrowLeftIcon className='absolute top-4 left-4 cursor-pointer' />
      </Link>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 border p-8 rounded-xl">
          <h1 className='font-extrabold text-xl'>Vytvořit účet</h1>
          <h2>Nezapoměň si vybrat silné heslo, které nikdo neuhádne!</h2>
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Uživatelské jméno</FormLabel>
                <FormControl>
                  <Input placeholder="Jen" {...field} />
                </FormControl>
                <FormDescription>
                  Tvoje veřejné jméno, které budeš používat na Notecz.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button className='flex justify-center items-center font-bold' variant={'secondary'} type="submit">Jdeme na to!</Button>
        </form>
      </Form>
    </main>
  );
}

i just wanna set the error message when the form is validated