Error when using Upload component of antd within FormItem

yorman2401 commented 8 months ago

When using the Upload component of antd as children of a FormItem and adding the valuePropName="fileList" attribute to the FormItem, an error occurs after selecting an image. The error is the following:

and, if for example, I don't add the valuePropName="fileList" attribute, I get the following error in the console:

It is important to say that the code works if I do not add the valuePropName="fileList" attribute, but I would always have the error in the console.

Example of my code:

"use client";

import { SubmitHandler, useForm } from "react-hook-form";
import { Button, Form, Upload } from "antd";
import { UploadChangeParam } from "antd/lib/upload";
import { FormItem } from "react-hook-form-antd";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const extensions = ["jpg", "jpeg", "png"];

const schema = z.object({
  image: z
    .custom<UploadChangeParam>()
    .refine(({ file: { name: fileName } }) =>
      extensions.some((ext) => fileName.includes(ext))
    )
    .optional(),
});

type TSchema = z.infer<typeof schema>;

export default function MyFormPage() {
  const { control, handleSubmit } = useForm<TSchema>({
    resolver: zodResolver(schema),
  });

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

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <Form onFinish={handleSubmit(onSubmit)}>
      <FormItem
        control={control}
        name="image"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        label="Image"
      >
        <Upload listType="picture-card">
          + Upload
        </Upload>
      </FormItem>

     {/* Other fields */}

      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
}

Also, I think the getValueFromEvent={normFile} attribute does nothing.

Environment: