Remix Hook Form File Upload

I'm testing Remix hook form for file upload, but I am having an issue where data is undefined after call validateFormData.

here is my action

export const action = async ({ request, params }: ActionFunctionArgs) => {

  const uploadHandler = unstable_composeUploadHandlers(
    unstable_createFileUploadHandler({
      maxPartSize: 5 * 1024 * 1024,
      file: ({ filename }) => filename,
      directory: "./public/uploads",
    }),
    unstable_createMemoryUploadHandler()
  );
  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

  let { errors, data } = await validateFormData<FormData>(formData, resolver);

  console.log("data", data) --> data is undefined here
}

here is my render function

export default function () {
  const {
    ...
  } = useRemixForm({
    mode: "all",
    resolver,
    defaultValues: {
      title: "",
      content: "",
      image: undefined,
    },
    submitConfig: {
      encType: "multipart/form-data",
      method: "POST",
    },
  });

  return (
    <Form onSubmit={handleSubmit} method="POST">
      <div>

          <Input type="text" {...register("title")} />

      </div>
      <div>

          <Input type="text" {...register("content")} />

        </Label>
      </div>
      <div>
          <Input
            type="file"
            id="file-upload"
            accept="image/*"
            {...register("image")}
          />      
      </div>

    </Form>
  );
}

forge42dev / remix-hook-form

Remix Hook Form File Upload #66