Bootstrap 5 Carousel Navigation Buttons Mapping issue

I made the following Bootstrap 5 Carousels in React. This generates as many carousels as many array items we have, with dynamically changing images.

My issue is that all Carousels navigation buttons point to the first Carousel slides and because of that all the Carousels buttons change the First Carousel's slides. The reason for this, I believe, is that the slide buttons point to the id 'carouselExampleIndicators', which handles only the first Carousel.

What is the best way to deal with this problem, and How to do it?

My plan is to solve this problem by making the id change dynamically, but I'm not sure how to do it.

const MyQUESTIONS = [
    {quest: Question1 , answer: Question1A },
    {quest: Question2 , answer: Question2A },
    {quest: Question3 , answer: Question3A },
    {quest: Question4 , answer: Question4A },
  ];



const Questions = () =>{
 return (
<>

//It maps through the array, creating x amount of carousels
{MyQUESTIONS.map((questionData) => {
  return (
<div className="row question__row">
<div id="carouselExampleIndicators" className="carousel carousel-dark slide question__carousel mb-5 mt-5 me-auto ms-auto" data-bs-ride="carousel">
  <div className="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div classNamelass="carousel-inner">
    <div className="carousel-item active">
        <img className="d-block w-100" src={questionData.quest} alt="First slide" />
    </div>
    <div className="carousel-item">
  
        <img className="d-block w-100" src={questionData.answer} alt="Second slide" />
    </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>
    <span className="visually-hidden">Previous</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>
    <span className="visually-hidden">Next</span>
  </button>
</div>
</div>

  );
})}

</>
 )
}

Carousels:

from Bootstrap 5 Carousel Navigation Buttons Mapping issue