How can I separate Navbar links in React-Bootstrap?

Question

I'm using a Navbar component with Nav.Link components for each page that I'm linking to. I have those links centered. I would like to add a 'Sign In' button that is justified to the right. So far, the "ml-auto" class name has not worked. Is there a simple way to justify individual (or groups) of links differently on the same Navbar?

Here is the code:

  return (
    <Navbar bg="dark" variant="dark" fixed="top">
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse className="justify-content-center">
          <Nav defaultActiveKey="1">
            <Nav.Link as={Link} to="/about" eventKey="1">About Me</Nav.Link>
            <Nav.Link as={Link} to="/exp" eventKey="2">Experience</Nav.Link>
            <Nav.Link as={Link} to="/edu" eventKey="3">Education</Nav.Link>
            <Nav.Link as={Link} to="/skills" eventKey="4">Skills</Nav.Link>
            <Nav.Link href="#signIn">Sign In</Nav.Link>
          </Nav>
        </Navbar.Collapse>
    </Navbar>
  );
}

Here is my Navbar currently