Necesito Bootstrap Carousel para completar los datos de cada elemento en newMovies[]. En este caso, siempre habrá 5 artículos en total. Obviamente, lo que tengo a continuación es incorrecto, pero probé algunas cosas similares diferentes y no puedo resolverlo. Lo que se pega a continuación solo mostrará los datos del último elemento de la matriz.

 <div className='container'> <img className='glowSign' src={glowSign} alt='New Releases'></img> <div id="carouselExampleIndicators" className="carousel slide" data-bs-interval="false" data-bs-ride="carousel"> <ol className="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"></li> </ol> <div className="carousel-inner"> {newMovies.map((movie) => { return( <div className="carousel-item active" key={movie._id}> <img className="d-block w-100" src={comedyGenre} alt="First slide" /> <div className="carousel-caption d-md-block"> <h5>{movie.title}</h5> <p>{movie.runtime}</p> </div> </div> ) })} </div> <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span className="carousel-control-prev-icon" aria-hidden="true"></span> </button> <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span className="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div>