React - 打开另一个菜单时关闭自定义上下文菜单

Question

我制作自定义上下文菜单 这里的代码：

function useContextMenu() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  });
  const [isShow, setIsShow] = useState(false);

  useEffect(() => {
    const handleClick = () => setIsShow(false);
    const hideEvent = "click blur";
    hideEvent.split(" ").forEach((e) => {
      window.addEventListener(e, handleClick);
    });

    return () => {
      hideEvnet.split(" ").forEach((e) => {
        window.removeEventListener(e, handleClick);
      });
    };
  }, []);


  function contextMenu() {
    return (isShow && createPortal( < ContextMenu position = {
          position
        }
        />,document.body))
      }

      function onClick(event) {
        event.preventDefault();
        setPosition({
          x: event.pageX,
          y: event.pageY
        });
        setIsShow(true);
      }

      return [contextMenu, onClick];
    }


    function AlbumCard({
      index,
      album
    }) {
      const [contextMenu, onClick] = useContextMenu();

      return ( <
        div className = "album-card"
        onContextMenu = {
          (e) => onClick(e)
        } > {
          contextMenu()
        } <
        /div>
      );
    }

如果我在上下文菜单外单击它工作正常，它关闭但如果我右键单击打开另一个，旧的不会关闭，我认为问题是每个 AlbumCard 都有自己的上下文菜单门户，我已经尝试过将“menucontext”添加到事件侦听器，但它不起作用。