react bootstrap navbar dropdown not on top code example

Example 1: import dropdown react

//import DropDown
import { Dropdown } from 'react-bootstrap';

//inside of return
<div className="dropdown">
        <Dropdown>
        <Dropdown.Toggle 
        variant="secondary btn-sm" 
        id="dropdown-basic">
            Language
        </Dropdown.Toggle>

        <Dropdown.Menu style={{backgroundColor:'#73a47'}}>
            <Dropdown.Item href="#" >Arabic</Dropdown.Item>
            <Dropdown.Item href="#">English</Dropdown.Item>
        </Dropdown.Menu>
        </Dropdown>
</div>

Example 2: move navbar items to right with reactbootstrap

<Navbar bg="light" variant="light">
            <Container>
                <LinkContainer to="/">
                    <Navbar.Brand>Navbar</Navbar.Brand>

                </LinkContainer>
               // <Nav className="mr-auto"> to  <Nav className="ml-auto">
                    <Nav.Link to="/cart">Cart</Nav.Link>
                    <Nav.Link to="/login">Sign In</Nav.Link>
                </Nav>

            </Container>
        </Navbar>
// just change the margin-right(mr-auto) to margin-left(ml-auto)
// This should be working fine