I'm trying to create a simple carousel using react Bootstap but it seems not to work. The code below doesn't work

function CarouselItem({ item }) {

 return (
   <Carousel.Item>
  <img
    className="d-block w-100"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
    alt="First slide"
  />
  <Carousel.Caption>
    <h3>{`${item} slide label`}</h3>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  </Carousel.Caption>
</Carousel.Item>
 );
}

function App() {
    return (
     <div className="App">
  <Carousel>
    {[1, 2, 3, 4, 5, 6].map((item) => {
      return <CarouselItem key={item} item={item} />;
    })}
  </Carousel> 
</div>
 );
}

but this code works very fine. Is there a way i can make the first code work? Because I have to fetch data in the CarouselItem component for each item before i render it that is why I want to use the first approach.

function App() {
  return (
    <div className="App">
  {/**but this way works**/}
  <Carousel>
    {[1, 2, 3, 4, 5, 6].map((item) => {
      return (
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQom33pPRha3xPSmmGVI5zaqSiraDxb_KuMKvmIOnfQb3rbHZZKJ8wxRGttgjfDpQ3cKrQ&usqp=CAU"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>{`${item} slide label`}</h3>
            <p>
              Nulla vitae elit libero, a pharetra augue mollis interdum.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      );
    })}
  </Carousel> 
</div>
 );
}

you can find the sandbox code here sandbox code