Десктоп меню и мобильное меню это разные компоненты?

Пробую reactjs, и хочу разобраться в компонентах.
Меню для ПК версий и моб.меню писать, как разные компоненты или как один?. Пункты меню абсолютно одинаковые, отличаются лишь расположением и вывод многоуровневого меню. В десктоп версий меню расположено горизонтально, при нажатий на пункт меню появляется отдельный блок на всю страницу с выбором доп.ссылок. В мобильной версий оно вертикальное появляется после нажатия на бургер, меню представляет себя что то вроде аккордеон. При нажатий на пункт блок раскрывается с контентом. Сам считаю лучше разделить на разные компоненты. Т.к логика вывода подменю у них разная, да и выглядят по разному не смотря что пункты меню одинаковые (Цвет, размер, активная ссылка)

components/MenuDesktop.jsx
components/MenuMobile.jsx
components/MenuMain.jsx
components/MenuLogo.jsx

function MenuDesktop(){
  return (
     <div className="menu menu--desktop">
          <MenuLogo/>
          ...
     </div>
   );
}

function MenuMobile(){
  return (
     <div className="menu menu--mobile">
          <MenuLogo/>
             ...
     </div>
   );
}

function MenuMain(){
  return (
     <>
        <MenuDesktop />
        <MenuMobile />
     </>
   );
}

Модификаторы для класса меню добавил, что бы при разных разрешений экрана скрывать/показывать определенное меню. Мой подход считается в React правильным?