Why reactstrap carousel code snippet on document is not working?

I have tried to reactstrap carousel. I copied some codes below it, and tried to use it in my codebase. Carousel tag begin with UncontrolledCarousel working well. But I dont know why this code throw this error. TypeError: carouselItems.map is not a function Here I am also attaching the link related in document carousel

<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>

What am I doing wrong here? I tried to delete the functions, but that is also not working

Answer It works when we pass the as an array

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>
  );