Displaying Validation Messages with Zod in Next.js

const form = useForm({
    defaultValues: {
      email: "",
      firstName: "",
      lastName: "",
      password: "",
    },
    onSubmit: async ({ value }) => {
      await signUp(value);
    },
    validatorAdapter: zodValidator(),
    validators: {
      onChange: insertUserSchema,
    },
  });

<form.Field
          children={(field) => <InputGroup field={field} type="password" />}
          name="password"
        />

function InputGroup({ field, ...props }: InputGroupProps) {
  return (
    <div className="flex flex-col gap-3">
      <label className="capitalize" htmlFor={field.name}>
        {field.name}
      </label>
      <Input
        name={field.name}
        onChange={(event) => field.handleChange(event.target.value)}
        {...props}
      />
      {field.state.meta.errors ? (
        <em role="alert">{field.state.meta.errors.join(", ")}</em>
      ) : null}
    </div>
  );
}