Estoy tratando de crear un carrusel simple usando reaccionar Bootstap pero parece que no funciona. El siguiente código no funciona.

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

pero este código funciona muy bien. ¿Hay alguna manera de que pueda hacer que el primer código funcione? Debido a que tengo que obtener datos en el componente CarouselItem para cada elemento antes de renderizarlo, es por eso que quiero usar el primer enfoque.

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

puede encontrar el código de sandbox aquí código de sandbox