Repository: ui
Issue: [Bug]: TypeScript Error: Incompatible `value` type in `InputProps`
Labels: bug

### Describe the bug

I'm encountering a TypeScript error in my NextJS app when trying to use an `Input` component for file uploads. The error message is as follows:

```bat
Type '{ multiple: true; type: "file"; accept: string; onChange: (...event: any[]) => void; onBlur: Noop; value: File[]; disabled?: boolean | undefined; name: "images"; ref: RefCallBack; }' is not assignable to type 'InputProps'.
  Types of property 'value' are incompatible.
    Type 'File[]' is not assignable to type 'string | number | readonly string[] | undefined'.
      Type 'File[]' is not assignable to type 'readonly string[]'.
        Type 'File' is not assignable to type 'string'.ts(2322)
```
The error occurs in the following code snippet:
```tsx
<FormField
    control={form.control}
    name="images"
    render={({ field }) => (
        <FormItem>
            <FormLabel>
                images <span className="text-muted-foreground">(You can upload up to 5 images)</span>
            </FormLabel>
            <FormControl>
                <Input {...field} multiple type="file" accept="image/jpeg, image/png" />
            </FormControl>
            <FormMessage />
        </FormItem>
    )}
/>
```
The `Input` component is being used with the `react-hook-form` library and the `zod` schema validation library. The relevant part of the schema is:
```tsx
images: z.array(
    z
        .instanceof(File)
        .refine((file) => file.size <= MAX_UPLOAD_SIZE, "Image size must be less than 1MB.")
        .refine((file) => ACCEPTED_FILE_TYPES.includes(file.type), "Invalid file type. Only JPEG and PNG are allowed.")
),
```
The `Input` component's `value` prop is expected to be a `string | number | readonly string[] | undefined`, but it's receiving a `File[]` due to the `images` field in the form.

Any help resolving this issue would be greatly appreciated.

### Affected component/components

Input

### How to reproduce

1. Create a NextJS app.
2. Install these packages:
```bat
npm i zod react-hook-form && npx shadcn-ui@latest add form && npx shadcn-ui@latest add input
```
3. In `app/page.tsx` add this code:
```tsx
'use client';

import { Input } from '@/components/ui/input';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';

const MAX_UPLOAD_SIZE = 1024 * 1024 * 1; // 1MB
const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png'];

const schema = z.object({
  images: z.array(
    z
      .instanceof(File)
      .refine(
        (file) => file.size <= MAX_UPLOAD_SIZE,
        'Image size must be less than 1MB.'
      )
      .refine(
        (file) => ACCEPTED_FILE_TYPES.includes(file.type),
        'Invalid file type. Only JPEG and PNG are allowed.'
      )
  ),
});

export default function Home() {
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      images: [new File([], '')],
    },
  });

  function onSubmit(values: z.infer<typeof schema>) {
    console.log(values);
  }

  return (
    <main>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <FormField
            control={form.control}
            name="images"
            render={({ field }) => (
              <FormItem>
                <FormLabel>images</FormLabel>
                <FormControl>
                  <Input
                    {...field}
                    multiple
                    type="file"
                    accept="image/jpeg, image/png"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </main>
  );
}
```



### Codesandbox/StackBlitz link

https://stackblitz.com/edit/shadcn-ui-issue-2997?file=app%2Fpage.tsx

### Logs

```bat
Unhandled Runtime Error
InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Call Stack
initInput
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (3581:0)
setInitialProperties
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (33346:0)
finalizeInitialChildren
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (35368:0)
completeWork
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (19725:0)
completeUnitOfWork
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25843:0)
performUnitOfWork
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25648:0)
workLoopSync
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25353:0)
renderRootSync
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25308:0)
recoverFromConcurrentError
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24525:0)
performConcurrentWorkOnRoot
(app-pages-browser)/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24470:0)
workLoop
(app-pages-browser)/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (256:0)
flushWork
(app-pages-browser)/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (225:0)
MessagePort.performWorkUntilDeadline
(app-pages-browser)/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)
```

```bat
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at initInput (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:3581:22)
    at setInitialProperties (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:33346:9)
    at finalizeInitialChildren (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:35368:3)
    at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19725:17)
    at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25843:14)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25648:5)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25353:5)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25308:7)
    at recoverFromConcurrentError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24525:20)
    at performConcurrentWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24470:26)
    at workLoop (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:256:34)
    at flushWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21)
```

```bat
app-index.js:35 The above error occurred in the <NotFoundErrorBoundary> component:

    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.
```

### System Info

```bash
Edition	Windows 10 Pro
Version	22H2
Installed on	‎2022-‎01-‎18
OS build	19045.4123
Experience	Windows Feature Experience Pack 1000.19054.1000.0

Google Chrome Version 122.0.6261.112 (Official Build) (64-bit)
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues