Navbar with column and divider vertical between them

I'm using React-bootstrap and I'm trying to do nav dropdown and the items inside it not acting like a table or grid.

     <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">Logo</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
            <Nav.Link href="">item1</Nav.Link>
            <Nav.Link href="">item2</Nav.Link>
            <Nav.Link href="">item3</Nav.Link>
            <Nav.Link href="">item4</Nav.Link>
            <Nav.Link href="">item5</Nav.Link>
            <NavDropdown menuRole="table" title="item6"> // I tried any menuRole like grid or any and nothing works
                <NavDropdown.Header>item6</NavDropdown.Header>
                <NavDropdown.Item href="">item6.1</NavDropdown.Item>
                <NavDropdown.Divider/> // and i don't know how to make it vertical.
                <NavDropdown.Header>item7</NavDropdown.Header>
                <NavDropdown.Item href="">item7.1</NavDropdown.Item>
            </NavDropdown>
        </Navbar.Collapse>
        </Navbar>

I don't know how to do the divider vertical react-bootstrap. Thanks for help