i want to achieve multilevel dropdown in with react-bootstrap or nested dropdown with react-bootstrap. can anyone know how can we achieve multilevel dropdown with react-bootstrap or is there any props which we can use?

i have tried this way but not working

const dropDownMenu = () => {
    <Dropdown>
        <Dropdown.Toggle as="div" role="button">
            <i className="bi bi-three-dots-vertical"></i>
        </Dropdown.Toggle>

        <Dropdown.Menu>
              <Dropdown.Item as="button" onClick={() => {}}>
                   Item 1
              </Dropdown.Item>

              <Dropdown.Item>
                   <Dropdown>
                         <Dropdown.Toggle as="div" role="button">
                              Item 2
                         </Dropdown.Toggle>

                         <Dropdown.Menu>
                               <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                               <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                               <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                        </Dropdown.Menu>
                </Dropdown>
           </Dropdown.Item>
      </Dropdown.Menu>
  </Dropdown>
}

i want to open children dropdown when we click on parent dropdown ** Item 2 **