为什么reactstrap官方文档的Carousel代码片段无法正常运行？

我尝试使用reactstrap的轮播组件，复制了文档下方的部分代码尝试在我的代码库中使用。以UncontrolledCarousel开头的轮播标签运行正常，但我不清楚为什么以下代码会抛出错误：TypeError: carouselItems.map is not a function。

报错代码如下：

<Carousel
  activeIndex={0}
  next={function noRefCheck(){}}
  previous={function noRefCheck(){}}
  slide={false}
>
  <CarouselIndicators
    activeIndex={0}
    items={[
      {
        altText: 'Slide 1',
        caption: 'Slide 1',
        key: 1,
        src: 'https://picsum.photos/id/123/1200/600'
      },
      {
        altText: 'Slide 2',
        caption: 'Slide 2',
        key: 2,
        src: 'https://picsum.photos/id/456/1200/600'
      },
      {
        altText: 'Slide 3',
        caption: 'Slide 3',
        key: 3,
        src: 'https://picsum.photos/id/678/1200/600'
      }
    ]}
    onClickHandler={function noRefCheck(){}}
  />
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 1"
      src="https://picsum.photos/id/123/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 1"
      captionText="Slide 1"
    />
  </CarouselItem>
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 2"
      src="https://picsum.photos/id/456/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 2"
      captionText="Slide 2"
    />
  </CarouselItem>
  <CarouselItem
    onExited={function noRefCheck(){}}
    onExiting={function noRefCheck(){}}
  >
    <img
      alt="Slide 3"
      src="https://picsum.photos/id/678/1200/600"
    />
    <CarouselCaption
      captionHeader="Slide 3"
      captionText="Slide 3"
    />
  </CarouselItem>
  <CarouselControl
    direction="prev"
    directionText="Previous"
    onClickHandler={function noRefCheck(){}}
  />
  <CarouselControl
    direction="next"
    directionText="Next"
    onClickHandler={function noRefCheck(){}}
  />
</Carousel>

我哪里操作有误？我尝试删除了相关函数，但依然无法正常运行。

报错原因是未将轮播元素内容作为数组传入组件，按如下写法修改即可正常运行：

const slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });
  
  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
    >
      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
      {slides}
      <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
      <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
    </Carousel>
  );

内容的提问来源于stack exchange，提问作者sayinmehmet47