Ключ React в обертке

Question

Просматривая нашу кодовую базу, я нашел код, который выглядит примерно так:

      const Carousel = ({ items }) => {
  return (
    <CarouselOuter>
      {items.map((item) => (
        <CarouselItemWrapper>
          <CarouselItem key={item.key}>
            ...
          </CarouselItem>
        </CarouselItemWrapper>
      )}
    </CarouselOuter>
  );
}

Обратите внимание, что свойство on , а не компонент, который напрямую возвращается из items.map. Кажется, это работает нормально, и в консоли нет предупреждений, но это противоречит каждому примеру, который я видел с использованием mapв Реакте.

Я хочу знать, есть ли хороший аргумент (особенно в отношении производительности) для изменения кода с помощью keyкак показано ниже, или если это просто стилистический выбор:

      const Carousel = ({ items }) => {
  return (
    <CarouselOuter>
      {items.map((item) => (
        <CarouselItemWrapper key={item.key}>
          <CarouselItem>
            ...
          </CarouselItem>
        </CarouselItemWrapper>
      )}
    </CarouselOuter>
  );
}

Примечание: CarouselOuter, CarouselItem, а также CarouselItemWrapperвсе styled-components , но я сомневаюсь, что это актуально.