React mousedown 事件仍然在弹出窗口中的 MenuItem Select 上触发

问：

我有一个反应代码，它有一个在单击时弹出的 div，在弹出窗口中有一个用户可以选择的菜单项。

每当用户单击菜单项时，都会触发鼠标按下事件并关闭弹出窗口。 理想情况下，它应该仅在用户单击 div 组件外部时触发

这是我的代码。

const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef);

function useOutsideAlerter(ref) {
   useEffect(() => {
      /**
       * Alert if clicked on outside of element
       */
      function handleClickOutside(event) {
        event.stopPropagation();
        if (ref.current && !ref.current.contains(event.target)) {
          alert("You clicked outside of me!");
          // setFilterClicked(false);
          // setSortClicked(false);
        }
      }
      // Bind the event listener
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }, [ref]);
 }

这是我的 JSX 代码，其中包括 Popup div 和 MenuItem。

 <div ref={wrapperRef} className={classes.sortCard}>
                 
 </div>