Reactjs 单击空白区域时，Reaction Multiple下拉组件不关闭

一个下拉组件，在单击时会显示下拉菜单，在下拉区域之外单击时会关闭下拉菜单.

现在有一个我花了很长时间试图解决的问题:

仅使用一个下拉列表组件，在空白区域中单击即可成功关闭下拉列表.

但是，如果有两个或三个下拉列表组件，则在空白区域中单击不会关闭下拉列表.

我的预期结果是:多个下拉组件，点击空白区域应该会关闭下拉菜单.

当前的问题是:对于单个下拉组件，单击空白区域会将其关闭；然而，对于多个下拉组件，单击空白区域并不会关闭它们.

如何解决这个问题？

现场演示:

https://stackblitz.com/edit/vitejs-vite-cizh35?file=src%2FApp.tsx个

import { useEffect, useRef, useState } from 'react';

type DropdownProps = {
  className?: string;
  handleSelectLanguage?: (language: string) => void;
  text: string;
  items: string[];
};

export const Dropdown: React.FC<DropdownProps> = (props) => {
  const [open, setOpen] = useState(false);
  const [text, setText] = useState(props.text);

  const ref = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    setOpen(!open);
  };

  useEffect(() => {
    setText(props.text);
  }, [props.text]);

  useEffect(() => {
    console.log('open1: ', open);

    function handleOutsideClick(e: MouseEvent) {
      e.stopImmediatePropagation();

      console.log('open2: ', open);

      const [target] = e.composedPath();

      console.log('target:', !ref.current?.contains(target as Node), open);

      if (!ref.current?.contains(target as Node) && open) {
        console.log('2');
        setOpen(false);
      }
    }

    document.body.addEventListener('click', handleOutsideClick, false);

    return () => {
      document.body.removeEventListener('click', handleOutsideClick, false);
    };
  }, [open]);

  return (
    <>
      <div className={`dropdown relative ${props.className}`} ref={ref}>
        <button
          className="w-full flex justify-center items-center rounded text-sm px-2 py-1 hover:bg-[#e3e3e3] border"
          style={{ display: 'flex' }}
          onClick={handleClick}
        >
          <span>{text}</span>
          <span className="test relative top-[1px] ml-1">
            <svg
              // stroke="currentColor"
              viewBox="0 0 12 12"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
              className="w-3 h-3"
            >
              <path d="M8.77814 4.00916C8.58288 3.8139 8.26629 3.8139 8.07103 4.00916L5.89096 6.18923L3.77338 4.07164C3.57811 3.87638 3.26153 3.87638 3.06627 4.07164L2.71272 4.42519C2.51745 4.62046 2.51745 4.93704 2.71272 5.1323L5.54114 7.96073C5.7364 8.15599 6.05299 8.15599 6.24825 7.96073L6.6018 7.60718C6.61932 7.58966 6.63527 7.57116 6.64965 7.55186L9.13169 5.06982C9.32695 4.87456 9.32695 4.55797 9.13169 4.36271L8.77814 4.00916Z" />
            </svg>
          </span>
        </button>
        {open && (
          <ul
            className={`dropdown-ul z-2 absolute mt-1 w-full rounded bg-[#efefef] ring-1 ring-gray-300 max-h-52 overflow-y-auto`}
          >
            {props.items.map((item, index) => {
              return (
                <li
                  key={index}
                  className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none hover:bg-[#e3e3e3]"
                  onClick={() => {
                    setOpen(false);
                    setText(item);
                    console.log('item: ', item);
                    props.handleSelectLanguage &&
                      props.handleSelectLanguage(item);
                  }}
                >
                  {item}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </>
  );
};

无法解决此问题，我使用了第三方库.

https://tailwindui.com/components/application-ui/elements/dropdowns个