Правильно ли делать такую структуру компонента в ReactJS?

components
         |
         -- Menu
               |
               --MenuLogo
                        |
                        MenuLogo.jsx
                        MenuLogo.scss
               --MenuButton
                        |
                        MenuButton.jsx
                        MenuButton.scss
               -- Menu.jsx
                  Menu.scss

MenuLogo.jsx

function MenuLogo() {
  return (
    <img src="../images/logo.png" alt="" className="menu__logo" />
  );
}

MenuButton.jsx

function MenuLogo() {
  return (
   <button className="menu__btn">Кнопка</button>
  );
}

Menu.jsx

function Menu() {
  return (
    <div className="menu">
      <MenuLogo />
      <MenuButton />
    </div> 
  )
}

Верстаю по БЭМ, и тут же вопрос правильно ли распределять так на мини компоненты или лучше все в одном файле написать, как единый компонент?
Непонимание в том, что мне кажется проще писать стили в одном файле в scss вот так, но минус в том, что будет большой код в компоненте. Как лучше сделать?

.menu {
   //...
   &__logo {
    //...
   }
   &__button {
    //...
   }
}