Image Upload - Copy this React, Tailwind Component to your project

{/* File Upload */} <div> <label className="block text white mb 2"> Product Image <span className="text gray 500">(optional)</span> </label> <div onDrop={handleImageDrop} onDragOver={(e) => e.preventDefault()} className="border 2 border dashed border gray 600 rounded lg p 6 text center hover:border [#6A5ACD] transition colors" > <input type="file" ref={fileInputRef} onChange={(e) => { if (e.target.files) { handleImageFile(e.target.files[0]); } }} accept=".jpg,.jpeg,.png,.webp" className="hidden" /> {imagePreview ? ( <div className="relative"> <img src={imagePreview} alt="Preview" className="max h 48 mx auto rounded" /> <button type="button" onClick={() => { setImagePreview(""); setFormData({ ...formData, image: null }); }} className="absolute top 0 right 0 bg red 500 rounded full p 1 transform translate x 1/2 translate y 1/2" > <MdClose className="text white" /> </button> </div> ) : ( <div onClick={() => fileInputRef.current?.click()} className="cursor pointer" > <FiUpload className="mx auto text gray 400 mb 2" size={24} /> <p className="text gray 400"> Drag & drop or click to upload </p> <p className="text gray 500 text sm">Max size: 5MB</p> </div> )} </div> {errors.image && ( <p className="text red 400 text sm mt 1">{errors.image}</p> )} </div> I want to add the ability of adding multiple images for product, the first uploaded image is the main image that will be displayed as the main image for this product, amount of images should be in range of 0 8, make it, modify this component so it will follow my requirements