Sim seria o melhor, principalmente pensando no lado de performance (imaginando q esse componente possa ser utilizado em um projeto grande), pq cada vez vc conseguir criar as regras de renderização (principalmente essas baseadas no tamanho da tela) com somente CSS, melhor será a performance das páginas.

Indo nessa linha de fazer a renderização condicional por CSS, oq vejo q vc possa melhorar o código desse componente é separar o código q é usado em mobile e em desktop em componentes diferentes, até pra ficar separado as responsabilidades de cada coisa. Ex:

// antes
{bodyWidth <= 1024 ? (
       <>
         <label htmlFor="checkboxMenuMobile" className="labelMenuMobile">
           <FiMenu />
         </label>
         <input
           type="checkbox"
           name="checkboxMenuMobile"
           id="checkboxMenuMobile"
         />
         <div className="navbar_contaierOptionsMobile">
           {optionsText.map((option, index) => (
             <a className="navbar_options" key={option + index} href="#">
               {option}
             </a>
           ))}
         </div>
       </>
     ) : (
       <div className="navbar_containerOptions">
         {optionsText.map((option, index) => (
           <a className="navbar_options" key={option + index} href="#">
             {option}
           </a>
         ))}
       </div>
     )}

// depois
function Navbar() {
...
    return (
    ...
    <>
     <NavbarContentMobile />
     <NavbarContentDesktop />
    </>
    ....
    )

Se for tudo a mesma coisa e só mudar as medidas e coisas do tipo é melhor fazer direto no css com media query.