How do a map in bootstrap carousel and keep one item active?

Question

I want map my Games array and keep one game carousel-item-active, how ? I do a fetchCall on my API and i want display them on a carousel

            <div className="carousel-inner">
                {games.map((game) => (
                    <div key={game.name} className="carousel-item active">
                        <img src={game.image} className="d-block w-50" alt={game.name} />
                        <div className="carousel-caption">
                            <h2>{game.name}</h2>
                            <p>{game.rating}</p>
                        </div>
                    </div>
                ))}```
i want a carousel with my 10 images nicely