尽管 e.preventDefault() 尝试选择时，nav、ul、li 标签内的下拉菜单会关闭

Question

const DropdownButtons = () => {

      const SettingsDropdownMenu = () => {
        const settingsNavRef = useRef();
        const [isSettingsActive, setIsSettingsActive] = useState(false);

        useOnOutsideClick(settingsNavRef, () => {
          if (isSettingsActive) setIsSettingsActive(false);
        });
      
      const toggleSettingsNav = () => {
            setIsSettingsActive(!isSettingsActive);
        };
 
      return (
          <>
            <div 
            ref={settingsNavRef} 
            className="menu-container" 
            id="settingsButton">
              <button
                className={isSettingsActive ? "active" : "menu-trigger"}
                onClick={toggleSettingsNav}
              >
                <SettingsTwoToneIcon /> 
              </button>
              {isSettingsActive && (
                <div
                  onClick={() => setIsSettingsActive(false)}
                >
                    <nav className={`menu ${isSettingsActive ? 'active' : 'inactive'}`}>
                    <header class="menu-title">User: </header>
                    <ul>
                        <li><a href="https://m2.protectedseas.net/resources/M2_Cloud_Help.pdf" target='_blank'>Help</a></li>
                        <li><a href="#">Logout</a></li>
                        <li></li>
                    </ul>
                                        <form onSubmit={changeRadarHandleSubmit}>
                      <label>
                        Change radar:
                        <select name="selectedRadar">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                      </label>
                </form>
                    </nav>
                </div>
              )}
            </div>
          </>
        );
      };

    return (
        <>
        <CssBaseline />
      <Control position="topright">
              <ButtonGroup orientation="vertical" variant="contained">
                <Tooltip placement="left">
                    <SettingsDropdownMenu />
                </Tooltip>
              </ButtonGroup>
              <ButtonGroup orientation="vertical" variant="contained">
                <Tooltip placement="left">
                    <InfoDropdownMenu />
                </Tooltip>
              </ButtonGroup> 
        </Control>
        </>

    );
  };

尝试从下拉列表中选择一个选项时，单击任何内容（例如下拉图标）时下拉列表会自动关闭。最初，下拉表单位于最后一个 li 标签内。我尝试把它放在外面但在 ul 里面，我也尝试把它放在 ul 外面。

我已确保在我的handleSubmit函数中包含e.preventDefault()，并且无论我将表单放在哪里，它仍然会自动关闭。

我还有一个自定义挂钩，可以在单击导航外部时关闭导航。

export const useOnOutsideClick = (ref, callback) => {
    const handleClick = (e) => {
      if (!ref.current?.contains(e.target)) {
        callback();
        console.log("click");
      }
    };
  
    useEffect(() => {
      document.addEventListener("click", handleClick);
  
      return () => {
        document.removeEventListener("click", handleClick);
      };
    });
  };