Реагировать на ключевую опору в оболочке

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

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

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

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

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

Боковое примечание: CarouselOuter, CarouselItem и CarouselItemWrapper - это все стилизованные компоненты, но я сомневаюсь, что это актуально.