How can I right align a link within my React Bootstrap NavBar? - html

Question

I have run into some trouble aligning a 'Login' link within my Bootstrap NavBar. Here is the following code of the NavBar:
import React, { Component } from 'react';
import {Navbar, Nav, Container, NavDropdown} from 'react-bootstrap';
import restorifyLogo from '../Images/restorify-logo.png';
class NavbarComp extends Component {
render() {
return (
<div>
<Navbar className="planted-navbar" variant="dark" expand="lg">
<Container className="navbar-container">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="planted-navbar-collapse">
<Nav className="ml-auto">
<Navbar.Brand href="#home">
<img
src={restorifyLogo}
width="243px"
height="70px"
className="d-inline-block align-top"
alt="Restorify logo"
/>{''}
</Navbar.Brand>
<NavDropdown title="Missions" id="missions-dropdown">
<NavDropdown.Item href="county-select">Missions Map</NavDropdown.Item>
<NavDropdown.Item href="current-missions">Current Missions</NavDropdown.Item>
<NavDropdown.Item href="completed-missions">Completed Missions</NavDropdown.Item>
<NavDropdown.Item href="start-mission">Start a Mission</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Trees" id="trees-dropdown">
<NavDropdown.Item href="my-trees">My Trees</NavDropdown.Item>
<NavDropdown.Item href="all-trees">Explore Trees</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="about" id="about-link">About</Nav.Link>
<Nav.Link className="justify-content-end" href="login" id="login-link">Login</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
}
export default NavbarComp;
I am using Bootstrap v5.2.2. Below you can see a screenshot of the NavBar.