How to add a <input type="file" multiple/> when using zod + react-hook-form in Next.js 14?

[zwl1619]

Here is an example of Zod + react-hook-form:
https://github.com/react-hook-form/resolvers?tab=readme-ov-file#zod

In the example above, there are two fields: name and age.

I want to add a field that the type is file, and it has multiple attribute.

so I added some code to the original example, the new code is as follow:

app\next-react-hook-form-demo\page.js

'use client'

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }),
  age: z.number().min(10),
  // the field that I added.
  photos: z.any().refine(files => { return files.every(file => file instanceof File) }, { message: "Expected a file" })
                 .refine(files => files.every(file => ["image/jpeg", "image/jpg", "image/png", "image/webp"].includes(file.type)), "Only allow .jpg, .jpeg, .png and .webp"),  
});

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      {errors.name?.message && <p>{errors.name?.message}</p>}

      <input type="number" {...register('age', { valueAsNumber: true })} />
      {errors.age?.message && <p>{errors.age?.message}</p>}

      {/* input type="file" and message that I added  */}
      <input type="file" {...register('photos')} multiple />
      {errors.photos?.message && <p>{errors.photos?.message}</p>}

      <input type="submit" />
    </form>
  );
};

I added two pieces of code, as follow:

photos: z.any().refine(files => { return files.every(file => file instanceof File) }, { message: "Expected a file" })
               .refine(files => files.every(file => ["image/jpeg", "image/jpg", "image/png", "image/webp"].includes(file.type)), "Only allow .jpg, .jpeg, .png and .webp"),  

and

<input type="file" {...register('photos')} multiple />
{errors.photos?.message && <p>{errors.photos?.message}</p>}

Then I run it in Chrome, it has some errors:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

What should I do?