Cambiar el color de fondo activo de los elementos de NavDropDown.Item en Bootstrap utilizando ReactJS.

Por favor, considere el siguiente fragmento:

<navbar>
    <!-- algún contenido aquí -->
    <navbar.collapse>
        <!-- otro contenido aquí -->
        <nav>
            <navdropdown title="Mon compte" id="collasible-nav-dropdown">
                <link to='/login'>
                    <navdropdown.item as='span' classname='text-center'>Connexion</navdropdown.item>

                <link to='/register'>
                    <navdropdown.item as='span' classname='text-center'>Inscription</navdropdown.item>

            </navdropdown>
        </nav>
    </navbar.collapse>
</navbar>

Así que cuando hago clic en el NavDropdown.Item, aparece un color azul y quiero cambiarlo a otro color.

Así que fui a los archivos de Bootstrap y encontré en dropdown.css:

.dropdown-item {
    // algunas propiedades aquí...
    &:active {
        // algunas otras propiedades aquí
    }
}

Entonces, para cambiar ese color, anulé en mi archivo .css de la siguiente manera:

.dropdown-menu .dropdown-item.active {
    background-color: red;
}

Pero parece que no tiene efecto…

Entonces, ¿alguien sabe dónde estoy equivocado?