const handleFileUpload = (e) => {
  const files = Array.from(e.target.files); // Convert FileList to an array

  const newImages = files.map((file) => ({
    id: Date.now() + Math.random().toString(), // Generate unique ID
    name: file.name, // Capture the file name
    type: file.type, // Capture the file type
    url: URL.createObjectURL(file), // Generate a blob URL
  }));

  setFiles((prevFiles) => [...prevFiles, ...newImages]);
  setUploadedImages((prevImages) => {
    const updatedImages = [...prevImages, ...newImages];

    // Automatically set the first uploaded image as selected
    if (prevImages.length === 0 && newImages.length > 0) {
      setSelectedImageId(newImages[0].id);
      console.log("Default Selected Image URL:", newImages[0].url);
    }

    return updatedImages;
  });
};