Bootstrap drop down auto close not working on react

Question

I am using the drop button of bootstrap and it works ok when clicking on it, but when I want to disable it by click outside using the

autoClose='outside'

it does not work. When I click my hamburger menu, the menu drops as expected but when I want to disable it by clicking outside it does not. This is how my code looks like

        <Dropdown onClick={preventa} autoClose='outside' className='drop'>
            <Dropdown.Toggle id="dropdown-basic" >
              <a href="/" ><GiHamburgerMenu size={40} color="#bbff00" className='hamburger' /></a> 
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item href="#/action-1"><NavItems /></Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>

Where could I be going wrong

Answer 1

The autoClose prop of the Dropdown component in Bootstrap only works when the Dropdown.Menu is opened via a Dropdown.Toggle component (e.g., a button, a link etc)

In your component you use a dropdown component to wrap an anchor element having the GiHamburgerMenu icon. The dropdown component is not being used as a toggle, so the autoClose prop won't work.