React onClick 事件在 bootstrap 下拉菜单上不起作用

问：

我正在尝试在 React 中实现一个下拉菜单。 它位于我的组件内部。<Dropdown></Dropdown>return()

<Dropdown>
    <Dropdown.Toggle className="btn btn-dark">
        <i onClick={() => handleToggle()}>{icons['Menu']}</i>
    </Dropdown.Toggle>

     <Dropdown.Menu className="nav-container border-secondary-subtle border border-3">
          <Dropdown.Item href="#" className="nav-items">
              Dashboard
          </Dropdown.Item>
          <Dropdown.Item href="#" className="nav-items">
              Courses
          </Dropdown.Item>
     </Dropdown.Menu>
</Dropdown>

import { Dropdown } from "react-bootstrap";
import React, { useState } from 'react';
const [showDropdown, setShowDropdown] = useState(false);
    const handleToggle = () =>{
        setShowDropdown(!showDropdown);
        console.log(showDropdown)
    }

当前行为：单击“菜单”图标后，Dropdown.Menu 选项可见。但是再次单击菜单图标时，它不会被隐藏。

我尝试将 onClick 设置为 Dropdown.Toggle 和 Dropdown。两者都不起作用。但是在控制台中，我可以看到每次单击时 showDropdown 翻转的值。

我也在onClick = {（）=>setShowDropdown（！showDropdown）} 中尝试过这个

我在几个例子中看到他们没有使用任何eventListeners，但这对我也不起作用。

此外，我希望在单击任何菜单项后菜单不可见。

任何帮助将不胜感激。谢谢。