React Bootstrap - DropDownMenu 不关闭自定义样式

Question

我有这个下拉菜单组件，我在其中添加了一些样式，但是当我尝试关闭和打开该组件时它不起作用，我不知道这是一个错误还是需要做一些额外的事情在这些情况下，感谢您的帮助。

export const DropDownMenu = () => {

    const [show, setShow] = useState(false)
  return (
    <>
        <Dropdown show={show} className="d-inline mx-2 my-1">
            
            <Dropdown.Toggle className="dropDownToggle" onClick={ () => setShow(!show) }>
                <FaList />
            </Dropdown.Toggle>

            <Dropdown.Menu
                style={{
                    display: 'grid',
                    width: '30rem',
                    height: '20rem',
                    gridTemplateColumns: 'repeat(2, 1fr)',
                    margin:'0'
                }}
            >
                <Dropdown.Item
                    className=' d-flex justify-content-center align-items-center gap-1 border-bottom'
                    style={{ borderRight: '1px solid #e1e1e1' }}
                    onClick={ () => setShow(!show) }
                >
                    <FaHome /> <h4>Home</h4>
                </Dropdown.Item>

                <Dropdown.Item 
                    className='d-flex justify-content-center align-items-center gap-1 border-bottom'>
                    <FaCashRegister/> <h4>Sales</h4>
                </Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </>
  )
}