react-bootstrap NavDropdown无法折叠问题求助

我正在使用react-bootstrap 2.9.2（对应Bootstrap 5.3.2）构建导航栏，其中首个导航项是下拉列表。NavDropdown可以正常展开，下拉项的路由跳转也没问题，但始终无法自动折叠。按照React-Bootstrap的默认行为，下拉菜单应该在以下场景自动折叠：

• 再次点击下拉父项（比如当前的“Home”）
• 点击下拉子项（跳转到不同路由时）
• 点击导航栏外部区域

但我的项目里这些操作都触发不了折叠，目前只能靠刷新页面来收起下拉菜单。请问如何实现这三种典型场景下的下拉折叠？

相关代码 #

index.js #

import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js #

import './App.css'
import React from 'react';
import MainPage from './components/MainPage'
import { Header } from './components/Header';
import { NavHeader } from './components/NavHeader';
import { Routes, Route } from 'react-router-dom';
import TransactionsPage from './components/TransactionsPage';

function App() {
  return (
    <>
      <Header />
      <NavHeader />
      <Routes>
        <Route exact path='/' element={<MainPage/>} />
        <Route path='/home/:category' element={<MainPage/>} />
        <Route path='/transactions' element={<TransactionsPage />} />
      </Routes>
    </>
  )
}

export default App;

NavHeader.js #

import { Link, NavLink } from 'react-router-dom';
import { useState } from 'react';
import './NavHeader.css'

export const NavHeader = () => {
    const [expanded, setExpanded] = useState(false);
    return (
        <Navbar collapseOnSelect>
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="nav-header">
                        <NavDropdown
                                title="Home" 
                                id="collapsible-nav-dropdown" 
                                className="vertical-dropdown"
                                onToggle={() => setExpanded(!expanded)}
                                show={expanded}
                                >
                            <NavDropdown.Item as={NavLink} to="/home/stock">Stocks</NavDropdown.Item>
                            <NavDropdown.Item as={NavLink} to="/home/etf">ETFs</NavDropdown.Item>
                            <NavDropdown.Item as={NavLink} to="/home/full">Full</NavDropdown.Item>
                        </NavDropdown>
                        <Link to="/transactions" className="nav-item">Transactions & Performance</Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

NavHeader.css #

.nav-header {
    height: 4rem;
    display: flex;
    align-items: center;
    background-color: black;
}

.nav-item {
    color: grey;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
}

.vertical-dropdown .dropdown-menu {
    display: flex;
    flex-direction: column;
}

.vertical-dropdown .dropdown-item {
    width: 100%;
    text-align: left;
}

已尝试但无效的方法 #

• 将expanded状态赋值给NavDropdown的show、open、expanded属性，均无效果。
• 尝试Dropdown组件的多种示例，包括带onToggle、onBlur、autoClose的DropdownButton，均未达预期。

编辑记录 #

1. 修改NavHeader.css中的样式为：

.vertical-dropdown.show .dropdown-menu {
    display: flex;
    flex-direction: column;
}

现在点击子项或外部区域时响应性有所提升，但下拉菜单并未隐藏，只是从垂直布局变成了水平列表。如何让下拉菜单真正折叠隐藏，无需刷新页面？

2. 检查发现“折叠”状态下的下拉元素仍带有display: block样式，目前通过在Navbar.css中添加以下代码临时解决：

.vertical-dropdown .dropdown-menu {
    display: none;
}

内容的提问来源于stack exchange，提问作者Kevin