JSXで配列をループで回して２個ごとにdivで纏めたい

現在、特定の要素が集まった集合があり、それをループで回して２個の要素毎にdivで纏めたいです。
完成形のHTMLの例を挙げると以下の様な感じです。

  <div class="row">
    <div class="hoge"/>
    <div class="hoge"/>
  </div>
  <div class="row">
    <div class="hoge"/>
    <div class="hoge"/>
  </div>

上記の様なHTMLを出力する為に、以下の様なjsxを書きました。

  render () {
    return (
      <React.Fragment>
        {this.props.hoges.map((hoge, index) => (
          {index % 2 == 0 &&
            <div className="row">
          }
          <div class="hoge"/>
          {index % 2 == 1 &&
           </div>
          }
        ))}
      </React.Fragment>
    );
  }

しかしこの記法では２種類の文法的なエラーが検出されている様です。
一つ目は閉じないdivタグを宣言している点。
二つ目はmap内で{}を使おうとしている点。

二つ目は別の関数に切り分けて引数にindexを取り、その内部でifを書くことによって分けることは出来ます。ただ文法エラーを回避する為に関数を一つ作るのは出来れば避けたいと考えています。

何か良い方法はないでしょうか？
ご回答いただけると助かります。