Christian Brinch's questions

Tenho um objeto que quero renderizar, 8 itens por linha. A cada 8 itens, fecho a div da linha e inicio uma nova linha. Este é meu código

<div class="usage-row">
  {cpu.map((item, index) => (
  <>
    <div class="cpu">
      <i class={`bi bi-circle-fill ${item.description} led`}></i>
      CPU {item.realname}
    </div>
  {index % 8 === 7 && </div><div class="usage-row">}
  </>
  ))};
</div>

Isso falha na compilação e não consigo descobrir o porquê. Cada div é fechado. Colchetes e parênteses são verificados. Alguém pode me explicar o que está acontecendo?