Повторно использовать компонент React в функции карты

Упростите вот так.

function App() {
  return (
    <div className = "App">
    <ul>
      {[
        {
          name: "banana",
          count: 3
        },
        {
          name: "apple",
          count: 5
        }
      ].map(({ name, count }) => <li>{name}:{count} </li>)}
      </ul>
    </div>
  );
}

Вам нужно установить уникальное значение в качестве ключа для компонента List, потому что вы визуализируете List в цикле. Уникальное значение может быть идентификатором для каждого объекта в массиве или индексе из .map, но мы рекомендуем иметь уникальный идентификатор для каждого объекта в данных и использовать его в качестве ключа при итерации.

Индекс не рекомендуется в качестве ключа, но в худшем случае мы можем.

Также добавьте элемент ul, чтобы li отображался под ul

Код ниже был улучшен с добавлением ключа, ul и функции .map без возврата

    function App() {
         return (
              <div className = "App">
                <ul>
                 {[
                    {
                       id: 1
                       name: "banana",
                       count: 3
                    },
                    {
                     id:2,
                     name: "apple",
                     count: 5
                    }
                   ].map(({ id, name, count }) => (
                     <List key = {id} name = {name} count = {count} />;
                ))}
              </ul>
            </div>
           );
      }