FormMessage not displaying zod validation error

[rosonio]

Hi all, I have some troubles with zod validation error displaying in the FormMessage. I've been following the shadcn documentation on form and input and it's the same, but I can't seem to figure it out why this is not working.

I have this form-input component (did it so that it can be reused)

export const FormInput = <T extends FieldValues>(
  props: FormElementProps<T>
) => {
  return (
    <FormField
      control={props.form.control}
      name={props.name}
      render={({ field }) => (
        <FormItem>
          {props.label && <FormLabel>{props.label}</FormLabel>}

          <FormControl>
            <Input
              {...field}
              type={props.type}
              disabled={props.disabled}
              placeholder={props.placeholder}
            />
          </FormControl>

          {props.description && (
            <FormDescription>{props.description}</FormDescription>
          )}

          <FormMessage />
        </FormItem>
      )}
    />
  );
};

The zod schema is the following

export const loginViewFormSchema = z.object({
  email: z.string().email({ message: "Email is required" }),
  password: z.string().min(1, {
    message: "Password is required",
  }),
});

const loginForm = useForm<z.infer<typeof loginViewFormSchema>>({
    resolver: zodResolver(loginViewFormSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

And the form is used like this

<Form {...props.form}>
        <form
          onSubmit={handleSubmit(formSubmitHandler)}
          className="flex flex-col space-y-2"
        >
          <FormInput
            form={props.form}
            label="Email"
            name="email"
            disabled={formState.isSubmitting}
          />

          <FormInput
            form={props.form}
            label="Password"
            name="password"
            type="password"
            disabled={formState.isSubmitting}
          />

          <Button type="submit" disabled={formState.isSubmitting}>
            {formState.isSubmitting && (
              <Icons.spinner className="w-4 h-4 mr-2 animate-spin" />
            )}
            Sign In
          </Button>

          <Button type="button" variant="link" onClick={onClickForgotPassword}>
Having trouble signing in?
          </Button>
        </form>
      </Form>

There should be validation errors displayed, but nothing happens

Here is a link to a code sandbox which reproduces the problems https://codesandbox.io/p/devbox/sharp-jasper-z6c4gz?file=%2Fapp%2Fpage.tsx%3A15%2C6

[Gawdfrey]

I am facing the same issue, making changes in the form file when an error is present in the form, makes it show though.
But I am using react 19 and the react compiler, so kinda expected some issues...

Should probably include a full reproducible reproduction to be able to track it down.

[pos1234]

You have to add default values.

const form = useForm<z.infer>({
resolver: zodResolver(educationType),
defaultValues: {
fieldOfStudy: ""
}
})