Estoy tratando de permitir que el usuario cargue varias imágenes (no más de 3) en la base de datos de Firebase. Actualmente, el usuario solo puede seleccionar una imagen y cargarla. Este código también muestra la imagen seleccionada, ¿cómo podría modificarlo para que las múltiples imágenes seleccionadas se muestren como Twitter?

Post.js

 function Post() { const { data: session } = useSession(); const [selectedFile, setSelectedFile] = useState(null); const filePickerRef = useRef(null); const sendPost = async () => { const docRef = await addDoc(collection(db, "posts"), { postid: postId, id: session.user.uid, name: session.user.realname, username: session.user.username, email: session.user.email, userImg: session.user.image, timestamp: serverTimestamp(), }); const imageRef = ref(storage, `posts/${docRef.id}/image`); if (selectedFile) { await uploadString(imageRef, selectedFile, "data_url").then(async () => { const downloadURL = await getDownloadURL(imageRef); await updateDoc(doc(db, "posts", docRef.id), { image: downloadURL, }); }); } setSelectedFile(null); }; const addImageToPost = (e) => { const reader = new FileReader(); if (e.target.files[0]) { reader.readAsDataURL(e.target.files[0]); } reader.onload = (readerEvent) => { setSelectedFile(readerEvent.target.result); }; }; return ( <div> <img src={selectedFile} alt="" className="rounded-2xl max-h-80 object-contain" /> <div className="flex items-center justify-center pt-2.5 px-3 py-2 "> <div className="flex space-x-3"> <div className="text-white grayBoxHover" onClick={() => filePickerRef.current.click()} > <PhotographIcon className="text-[#FEFEFE] h-[25px]" /> <input type="file" ref={filePickerRef} hidden onChange={addImageToPost} /> </div> <div className="ml-auto"> <button className="px-5 py-2.5 text-lg font-bold bg-[#A3A3A5] hover:bg-[#d9d9d9] text-[#FEFEFE] disabled:hover:bg-[#A3A3A5] disabled:cursor-default rounded-lg" onClick={sendPost} > Post </button> </div> </div> </div> </div> ); } export default Post;