React JSX 三項演算子で Left side of comma operator is unused and has no side effects なエラーにハマる

危機管理〜
JSX内でコンポーネントを出し分けしようとしてハマったのでメモ

ダメだったコード

function App( isAdmin ) {
  return (
    <>
     {isAdmin? (
       <AdminMain />
       <AdminAside />
     ) : (
       <Main />
       <Aside />
     )}
    </>
  );
}

エディターのシンタックスハイライトで次のようなエラーが表示されていた Left side of comma operator is unused and has no side effects
当然エラーになって画面にも表示されない

三項演算子の `()` のとトップレベルに複数のタグがあるとダメ

Left side of comma って表示されてたから三項演算子が問題なんだと思ってたら、JSX のトップレベルに複数のタグを置けない問題だった。
先の例は三項演算子で返す () 内を <></> で囲えばOK

function App( isAdmin ) {
  return (
    <>
     {/* return している () の直下はタグでないとエラーになる */}
     {isAdmin? (
       <>
         <AdminMain />
         <AdminAside />
       </>
     ) : (
       <>
         <Main />
         <Aside />
       </>
     )}
    </>
  );
}

で返すで囲われたコンポーネントの直下に三項演算子持ってくることができないので、こんな構成だとすごく冗長に…
return ({isAdmin? (<>...</>) : (<>...</>) } みたいな書き方はエラーになる