CSS MODULES, BEM e SASS? No universo React!

Boa galera! Beleza? Então... eu comecei a estudar React JS a pouco tempo, só que acabei de me deparar em uma confusão que não é exatamente de React, mas está relacionado!

Se liga aí. O BEM(Block Element Modifier) é uma metodologia para solucionar alguns problemas, um deles seria o conflito de nomes das classes em escopo global, certo? Ex:

<nav class="menu">
        <ul class="menu__lista">
            <li class="menu__item"><a class="menu_link" href="#"></a></li>
            <li class="menu__item"><a class="menu_link" href="#"></a></li>
            <li class="menu__item"><a class="menu_link" href="#"></a></li>
        </ul>
        <img class="menu__logo" src="" alt="">
    </nav>

Já o Sass seria uma forma mais fácil de ver e acessar a arvore de elementos, correto? Ex:

.menu {
    //Estilização CSS
    .menu__lista{
        //Estilização
        .menu__item {
            //Estilização
            .menu__link {
                //Estilização
            }
        }
    }
    .menu__logo{
        //Estilização
    }
}

Por fim temos o CSS Modules, que nos auxilia adicionando um hash ao final do css, deixando ele único em escopo global, assim não permitindo que haja conflito entre os nomes das classes do css, está certo? Ex:

//No inspecionar elemento do Browser
nav__nomedoarquivo___Tz7_C

Se tudo que eu falei estiver correto (Caso falei algo errado, me corrija por favor, pois não sei tudo kkkk), aqui está minha confusão... Veja!

Com o pensamento voltado para React, imagine que na minha Stack eu utilizo CSS Modules e Sass, eu não necessito utilizar a metodologia BEM? pois o CSS Modules já vai resolver os conflitos de classes em escopo global, sendo assim as classes em css só vão fazer sentido no escopo do componente ou pagina em questão? e uma última pergunta... como estou usando o Sass não preciso nem nomear classes, pois posso acessar direto o elemento já que ele só vai fazer sentido em escopo local?

No arquivo index.jsx do componente ficaria assim, só com uma classe pai(menu):

<nav className="menu">
        <ul">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
        <img src="" alt="">
    </nav>

Já no arquivo style.module.scss ficaria assim:

.menu{
    //Estilização
    .menu ul {
        //Estilização
        .menu li {
            //Estilização
            .menu a {
                //Estilização
            }
        }
    }
    .menu img {
        //Estilização
    }
}

No caso acima, faz sentido eu colocar só uma classe pai (menu) para diferenciar no escopo global, e fazer a estilização das demais diretamente pela tag através do Sass? ou deve ser uma boa pratica colocar nomes em todas as tags do componente em questão ?

Se alguém puder me dar uma luz kkkk ficaria super grato. É nois, TMJ!