Deleting from firestore/storage does not flow

i’m have built an image gallery for users using Firebase Storage and React.
Upload and delete. My problem is deletion takes longer than it should.

Should happen:
Click on trashcan > confirm modal pops up > user clicks confirm > confirm disappears and delete process happens.

What happens:
Click on trashcan > confirm modal pops up > user clicks confirm > confirm disapears > user clicks on trashcan again > delete process happens and another confirm pops up.

export default function EditImageGallery({ handleUser }) {
  const imageListRef = useRef(ref(storage, `images/${handleUser}`));
  const [imageList, setImageList] = useState([]);

  const [hidden, setHidden] = useState(true);
  const [continueDelete, setContinueDelete] = useState(false);

  //lists all images in a users repo
  useEffect(() => {
    listAll(imageListRef.current).then(async (response) => {
      const promises = response.items.map((item) => getDownloadURL(item));
      const urls = await Promise.all(promises);
      setImageList(urls);
    });
  }, []);

  //Delete process
  const onDelete = async (e) => {
    const { id } = e.target;
    console.log("onClick Url", id);

    setHidden(false);
    // set in the confirm modal
    if (continueDelete === true) {
      //delete in storage
      const deleteRef = ref(storage, id);
      console.log("continue with the process:", deleteRef);
      deleteObject(deleteRef)
        .then(() => {
          console.log("Item was deleted from Firebase Storage", deleteRef);
        })
        .catch((error) => {
          console.log(error.message);
          toast.error(error.message);
        });

      //delete reference in firestore
      try {
        const imageDelete = collection(db, "images");
        const q = query(imageDelete, where("imageURL", "==", id));
        const snaps = await getDocs(q);
        snaps.docs.forEach((doc) => {
          console.log("Deleted Doc: ", doc);
          console.log("Deleted Doc: ", doc.ref);
          deleteDoc(doc.ref);
          // window.location.reload(true);
        });
      } catch (error) {
        console.log(error.message);
      }
    }
    setContinueDelete(false);
  };

  //show/hide confirm modal
  const toggleConfirm = () => {
    setHidden(!hidden);
  };

  //confirm deletion by modal
  const confirmDelete = () => {
    setContinueDelete(true);
  };

  return (
    <>
      {!hidden && (
        <ConfirmModal
          handleToggle={toggleConfirm}
          handleContinueDelete={confirmDelete}
        />
      )}
      <div className="w-full sm:w-4/5 container px-2 mx-auto pt-1 m-10">
        <div className="-m-1 flex flex-wrap md:-m-2">
          {imageList.map((url, index) => {
            // console.log(url, index);
            const imageURL = url.replace(
              `https://firebasestorage.googleapis.com`,
              ``
            );
            return (
              <>
                <div
                  key={url}
                  className="relative flex w-full md:w-1/4 sm:w-1/2 flex-wrap"
                >
                  <div className="w-full p-1">
                    <img
                      src={`https://ik.imagekit.io/ajuaxvsrja/tr:q-50/${imageURL}`}
                      alt={`portfolio-${index + 1}`}
                    />
                    {/* Delete process starts here */}
                    <BsTrash
                      title="delete"
                      className="h-8 w-8 rounded-full bg-transparent absolute right-2 top-2 z-5 p-2 m-1 ring ring-red-600 text-red-600 text hover:ring-red-800 hover:text-red-800 cursor-pointer"
                      onClick={onDelete}
                      id={url}
                    />
                  </div>
                </div>
              </>
            );
          })}
        </div>
      </div>
    </>
  );
}

Please let me know what in my code could be causing this.
I’m happy to add more code if you need to know something in particular.