I have a simple section in react which contains two buttons logo and banner, on click I am opening a simple modal from web component, now I want when user click cancel to show me something on the console.

Problem: When I click eg Logo button which opens the modal and I click cancel I get the console log I want, and then I click the banner button and open the modal and I click cancel, instead of giving just logs related to the banner button I get both of logs.

my code Live demo : live demo

import * as element from "./custom-element";

const Images = () => {
  const [imgName, setImgName] = useState();
  const [logo, setLogo] = useState();
  const [banner, setBanner] = useState();
  const elementRef = useRef(null);

  const handleUseImage = () => {
    switch (imgName) {
      case "logo":
        console.log("logo name", imgName);
        break;
      case "banner":
        console.log("banner name", imgName);
        break;
      default:
    }
  };

  useEffect(() => {
    if (imgName) {
      elementRef.current.addEventListener("cancel", function (e) {
        handleUseImage(e);
      });
    }
  }, [imgName]);

  const handleLogo = () => {
    setImgName("logo");
    openModal();
  };
  const handleBanner = () => {
    setImgName("banner");
    openModal();
  };
  const openModal = () => {
    elementRef.current.visible = true;
  };
  return (
    <div className="App">
      <custom-element ref={elementRef}></custom-element>
      <button onClick={handleLogo}>Logo </button>
      <button onClick={handleBanner}>Banner </button>
      <span>Logo url: {logo} </span>
      <span>banner url: {banner} </span>
    </div>
  );
};

export default Images;

[][2

Why do I get both logs?