React Bootstrap Navbar с использованием React Router Dom Variant = Dark не работает

Question

Я использую следующий код в приложении реагирования:

import React from 'react';

import { Link, NavLink } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';

const Navigation = () => {
    return (
       <Navbar bg="dark" variant="dark">
            <Navbar.Brand as={Link} to="/">Home</Navbar.Brand>
            <Nav.Link as={NavLink} to='/about'>About</Nav.Link>
            <Navbar.Brand as={Link} to='/tutorials'>Tutorials</Navbar.Brand>
            <Navbar.Brand as={Link} to='/console'>Console</Navbar.Brand>
       </Navbar>
    );
}

export default Navigation;

Приложение обернуто тегом BrowserRouter, как предлагается в других сообщениях. Результат выглядит следующим образом:

Темный вариант не работает

Тег Navbar.Brand правильно изменен на белый, однако теги Nav.Link по-прежнему синие, как будто используется вариант Light.

Как сделать так, чтобы элементы Nav.Link использовали вариант Dark из родительского Navbar?