I am trying to allow the user to upload multiple images (no more than 3) to the Firebase Database. Currently, the user can only select one image and upload it. This code is also displaying the selected image, how would I be able to modify it so that the multiple selected images will be shown just like 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;