react-bootstrap justify-content-end not being recognized when in desktop resolution, only when in mo-CodePudding

I'm trying to mix the alignment of <Nav> items:

In desktop resolution, they should be justify-content-end.
In mobile resolution, they should be fill.

I can not get any alignment working in the desktop resolution, only in the mobile resolution.

No matter what I put the desktop resolution stays left aligned:

The mobile resolution is exactly how I want it:

So the questions are how can I mix the two and what am I doing wrong in my implementation?

// parent Navigation.tsx
// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';

// Component imports
import NavigationItems from './NavigationItems';

// Import data
import data from '../../data/data.json';

const Navigation = () => {
  return (
    <Navbar collapseOnSelect sticky='top' expand='lg'>
      <Container>
        <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav' className='justify-content-end'>
          <NavigationItems {...data.navbar.navItems} />
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Navigation;

// child NavigationItems.tsx
// Bootstrap imports
import { Nav } from 'react-bootstrap';

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
  <Nav fill className='me-auto'>
    { 
      Object.entries(props).map((item, index) => {
        return (
          <Nav.Item key={index}>
            <Nav.Link href={item[1].href}>{item[1].name}</Nav.Link>
          </Nav.Item>
        )
      })
    }
  </Nav>
);

export default NavigationItems;

The <Navbar.Collapse id='basic-navbar-nav' className='justify-content-end'> came from the documentation example