How to use Bootstrap, BEM and React?

Question

Sass

There is a React application that has many components, each component has its own scss file:

list.js
list.scss
module.js
module.scss

I want to use Bootstrap (grid and some typography) and it works fine until you start using BEM:

<ul class="cars-list">
        <li class="cars-list__car">one</li>
        <li class="cars-list__car">two</li>
</ul>

In the scss file of this component we have:

.cars-list {
        properties...
    
        &__car {
            properties...
}

Instead of writing my own css properties, I would like to inherit them from Bootstrap, and let's add my own:

.cars-list {
        @extend .list-group;
    
        &__car {
        @extend .list-group-item;
        color: gray;
}

But, when I try to inherit, I get an error when compiling, saying that it cannot find such a class (from bootstrap). I think it's in the scope and in the wrong import of scss files.
PS I install Bootstrap via npm.
I tried to connect bootstrap in different ways both in the component and in scss files. It looked like a crutch, but it worked, only the bootstrap classes were assigned 2 times.
Questions such:
1. How it is correct to implement all this?
2. Is this approach correct? What are the alternatives?

Answer 1

You can use react-bootstrap.github.io
Alternatively, move away from BEM and switch to css in js .
I myself use and recommend Styled Components in my work.