How to resolve correctly my promise (React)

When i click some “ficha” the promise is completed correctly but when i click some other element in the DOM my event doesn´t finalice.
I want that when I click anything other than a token, the promise ends.
How can i resolve this?

The code:

import React from "react";
import { CardMovUser } from "../components/Cards/CardMovement";

const CardMovementContainer = ({
  movement,
  index,
  selectedCard,
  waitingForEvent,
  onCardClick,
  onEventComplete,
  isMyTurn
}) => {

  const handleClick = () => {
    if (!isMyTurn) return; 

    console.log("Clicked card", index);
    onCardClick(index);

    // Solo iniciar el evento de espera si `waitingForEvent` no está activo.
    if (!waitingForEvent) {
      waitForEvent("click", "[data-ficha-id]").then(() => {
        console.log("Ficha clicked OAAAAAAA");
        onEventComplete();
      });
    }
  };

  const waitForEvent = (eventType, selector) => {
    return new Promise((resolve) => {
      const handler = (event) => {
        console.log("Evento detectado en:", event.target); 
        const fichaElement = event.target.closest(selector);  selector
  
        if (fichaElement) {
          console.log("Ficha seleccionada: ", fichaElement); 
          document.removeEventListener(eventType, handler); 
          console.log("Evento removido");
          resolve();
        } 
      };
  
      console.log(`Añadiendo listener para ${eventType} en elementos que coincidan con ${selector}`);
      document.addEventListener(eventType, handler);
    });
  };

  return (
    <CardMovUser
      img_url={movement.movimiento.img_url}
      movetype={movement.movimiento.movement}
      handleClick={handleClick}
      clicked={selectedCard === index}
    />
  );
};

export default CardMovementContainer;

I’m trying to add an else statement, but when i click the card that triggers the event and the promise, this automatically ends the promise when it detects that I clicked something that was not a “ficha”.