React key prop within wrapper

Question

While looking through our code base, I found code that looks a bit like this:

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

Notice that the key prop is on CarouselItem, not CarouselItemWrapper, the component that's directly returned from items.map. This seems to work fine, and there are no warnings in the console, but it runs counter to every example I've seen using map in React.

I want know if there's a good argument (specifically in regards to performance) for rearranging the code with the key as shown below, or if this is just a stylistic choice:

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

Side note: CarouselOuter, CarouselItem, and CarouselItemWrapper are all styled-components, but I doubt that's relevant.