带有 Zod 和 Material ui 的 React 钩子表单未显示任何错误

问：

这是我用 Material UI 制作的，以及带有 zod 验证的 react-hook-form，但我有一个问题：当我在表单中提交数据时，它会在控制台中显示数据，但是当我想产生错误时，它没有显示任何错误。ProductInfoForm

//ProductInfoForm Page
'use client';
import React from 'react';
import { Controller, SubmitHandler, useForm } from 'react-hook-form';
import {
  productInfoSchema,
  productInfoSchemaType,
} from '@/utils/validations/AddNewProductFormValidation';
import { Button, TextField } from '@mui/material';
import { zodResolver } from '@hookform/resolvers/zod';

const ProductInfoStep = () => {
  const { handleSubmit, formState, control } = useForm<productInfoSchemaType>({
    mode: 'all',
    reValidateMode: 'onChange',
    resolver: zodResolver(productInfoSchema),
  });

  console.log(formState.errors);

  const onSubmit: SubmitHandler<productInfoSchemaType> = (data) => {
    console.log(data);
  };

  return (
    <div className='p-5 flex flex-col gap-5'>
      <form>
        <Controller
          control={control}
          name='product_name'
          render={({ field }) => (
            <TextField inputRef={field.ref} {...field} label='Product Name' />
          )}
        />
        <div className='justify-end'>
          <Button onClick={handleSubmit(onSubmit)} variant='contained'>
            Next
          </Button>
        </div>
        <div>
          {formState.errors.product_name && <p>Product name is required.</p>}
        </div>
      </form>
    </div>
  );
};

export default ProductInfoStep;

//zod schema
import { z } from 'zod';

export const productInfoSchema = z.object({
  product_name: z.string().min(10).or(z.string().nonempty('required')),
});

export type productInfoSchemaType = z.infer<typeof productInfoSchema>;

我希望在提交表单时出现错误，但未进行必要的验证。