Dupla renderização no componente item

Olá, Pedro! Tudo bem?

Isso pode está acontecendo devido ao modo estrito (Strict Mode) do React. Você pode ativar este modo para qualquer parte da aplicação. O que ele faz é te ajudar a identificar potenciais problemas de sua aplicação.

import React from 'react';

function ExampleApplication() {
  return (
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
  );
}

Conceitualmente o React funciona em duas fases:

• A fase de renderização determina quais mudanças precisam ser feitas para, por exemplo, o DOM. Durante essa fase, o React chama o método render e compara o resultado com a renderização anterior.

• A fase de commit é quando o React aplica qualquer mudança. (No caso do React DOM, isso é quando o React insere, atualiza ou remove nós do DOM.)

O React pode invocar a fase de renderização várias vezes antes de commitar, por isso você acaba observando que ele renderiza algumas coisas duplicadas, como no seu caso.

Para saber mais recomendo ler a documentação do React e entender como funciona esse modo estrito.

Abraços e bons estudos!