为什么验证失败时不显示错误消息？

问：

我正在使用 react-hook-form，在我的一生中似乎无法弄清楚以下实现有什么问题：

form.jsx（格式.jsx）

"use client";

import { useForm } from "react-hook-form";
import * as utils from "../utils/validations.js";

const Form = () => {
  const {
    register,
    handleSubmit,
    formState: { isValid, errors },
  } = useForm({
    defaultValues: {
      compressionLevel: 90,
    },
  });

  return (
    <form
      onSubmit={handleSubmit((data) => {
        console.log(data);
      })}
    >
      <label htmlFor="file">File:</label>
      <input
        {...register("file", {
          required: true,
          validate: utils.validateFile,
        })}
        type="file"
        id="file"
        accept=".png, .gif, .bmp, .tiff, .webp, .jpeg"
      />

      <p>{errors.file?.message}</p>

      <input disabled={!isValid} type="submit" />
    </form>
  );
};

验证.js

export function validateFile(files) {
  const fileFormat = files[0]?.type.slice(6);
  return (
    ["png", "gif", "bmp", "tiff", "webp", "jpeg"].includes(fileFormat) || "error!"
  );

为什么错误对象没有更新，即使验证函数显然被调用并按预期运行？

任何其他建议将不胜感激。我是这个图书馆的新手，确实希望有任何关于实现预期结果的更好方法的建议。