[Bug]: using shadcdn/Form gives warning in console : React does not recognize the `formState` prop on a DOM element.

[recursivezero]

Describe the bug

using shadcdn/form in Astro based website throw warning in console

Note: code sandbox

taking refremce from this form document page

Warning: React does not recognize the `formState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `formstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at input
    at eval (/Users/keshavmohta/Developer/startup/client/src/components/ui/Input.tsx:9:51)
...

below is basic code snippet

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

import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

const MAX_IMAGE_SIZE = 5242880; // 5 MB
const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/jpg"];

const formSchema = z.object({
  name: z
    .string({
      required_error: "Enter Product Name"
    })
    .min(3, {
      message: "Enter minimum 3 letter product name"
    })
    .max(30, {
      message: "Product Name must be less than 30 characters"
    }),
  images: z
    .custom<FileList>((val) => val instanceof FileList, { message: "Required" })
    .refine((files) => files.length > 0, { message: "Required" })
    .refine((files) => files.length <= 3, { message: "Maximum 2 images are allowed." })
    .refine((files) => Array.from(files).every((file) => file.size <= MAX_IMAGE_SIZE), {
      message: "Each file size should be less than 5 MB."
    })
    .refine((files) => Array.from(files).every((file) => ALLOWED_IMAGE_TYPES.includes(file.type)), {
      message: "Only these types are allowed .jpg, .jpeg, .png and .webp"
    })
});

export const ProductForm = () => {

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema)
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log("submit called");
    console.log(values);
  }
 return (
   <>
 <div className="bg-white dark:bg-black">
<Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Product Name</FormLabel>
                    <FormControl>
                      <Input type="text" placeholder="Product Name " {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            <FormField
                control={form.control}
                name="images"
                render={({ field: { onChange }, ...field }) => (
                  <FormItem>
                    <FormLabel>Images</FormLabel>
                    <FormControl>
                      <Input
                        className="dark:bg-slate-800 dark:text-white"
                        type="file"
                        id="picture"
                        accept="image/*"
                        multiple={true}
                        disabled={form.formState.isSubmitting}
                        {...field}
                        onChange={(event) => {
                          const dataTransfer = new DataTransfer();
                          const oldImages = form.watch("images");
                          if (oldImages) {
                            Array.from(oldImages).forEach((image) => dataTransfer.items.add(image));
                          }
                          Array.from(event.target.files!).forEach((image) => dataTransfer.items.add(image));
                          const newFiles = dataTransfer.files;
                          handleImageUpload(event);
                          onChange(newFiles);
                        }}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
         </form>
</Form>
</div>
</>)
};

### Affected component/components

form

### How to reproduce

copy above snippet

and see in console

### Codesandbox/StackBlitz link

_No response_

### Logs

_No response_

### System Info

```bash
Windows 11

package.json


    "@astrojs/check": "0.3.4",
    "@astrojs/netlify": "4.1.1",
    "@astrojs/react": "3.0.9",
    "@astrojs/tailwind": "5.1.0",
    "@headlessui/react": "1.7.18",
    "@heroicons/react": "2.1.1",
    "@hookform/resolvers": "3.3.4",
    "@radix-ui/react-icons": "1.3.0",
    "@radix-ui/react-label": "2.0.2",
    "@radix-ui/react-select": "2.0.0",
    "@radix-ui/react-slot": "1.0.2",
    "astro": "4.0.8",
    "axios": "1.6.5",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.0",
    "file-type": "19.0.0",
    "json-server": "1.0.0-alpha.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-drag-drop-files": "2.3.10",
    "react-hook-form": "7.50.0",
    "react-hot-toast": "2.4.1",
    "react-icon": "1.0.0",
    "react-icons": "5.0.1",
    "tailwind-merge": "2.2.0",
    "tailwindcss": "3.4.0",
    "tailwindcss-animate": "1.0.7",
    "typescript": "5.3.3",
    "zod": "3.22.4"
}

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues