How do I align react-router NavLink in the bootstrap Navbar?

I want to use NavLink instead of Nav.Link in my react-bootstrap navbar so I can use the activeClassName prop. However it seems that all the links lose their alignment, there is no longer any horizontal margin between them and they are not centered vertically in the navbar:

code as follows:

function NavbarDefault() {
    return (
        <Container>
            <Navbar variant="custom" expand="md">
                <Navbar.Brand as={NavLink} to="/">
                    <img 
                        className="navbar-logo-image" 
                        src={logo} alt="Brand Logo" />
                    <span className="navbar-logo-text">cool brand</span>
                </Navbar.Brand>
                <Navbar.Toggle 
                    className="navbar-toggler-custom" 
                    aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="ml-auto">
                        <NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/features">Features</NavLink>
                        <NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/pricing">Pricing</NavLink>
                        <NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/contact">Contact</NavLink>
                        <SecondaryButton 
                            className="navbar-login-button">
                                Try now
                        </SecondaryButton>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </Container>
    );
}

and CSS:

.nav-link-custom {
    color: #41a2fb;
}
.nav-link-custom:hover {
    color: #0681EF;
    text-decoration: none;
}
.nav-link-custom-active {
    color: red;
}

Originally I tried to solve this problem by using something like <Nav.Link as={NavLink} ....... this worked for the navigation and alignment however the activeClassName prop doesn't work that way, so I had to revert to NavLink. How can I center these nav links vertically in the navbar?