Bootstrap accordion is not working properly in inside owl-carousel

Question

Bootstrap accordion icons are not working properly inside owl-carousel how can I resolve it?? icons are not according to which accordion is open. ............................................................................... ............................................................................... ...............................................................................

   

 var bigimage = $("#big");
      var thumbs = $("#thumbs");
      var syncedSecondary = true;

      bigimage
        .owlCarousel({
          items: 1,
          nav: false,
          autoplay: false,
          dots: false,
          loop: true,
          navText: [
            '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
            '<i class="fa fa-arrow-right" aria-hidden="true"></i>',
          ],
        })
        .on("changed.owl.carousel", syncPosition);

      thumbs
        .on("initialized.owl.carousel", function () {
          thumbs.find(".owl-item").eq(0).addClass("current");
        })
        .owlCarousel({
          items: 6,
          dots: false,
          nav: false,
          mouseDrag: false,
          navText: [
            '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
            '<i class="fa fa-arrow-right" aria-hidden="true"></i>',
          ],
          responsive: {
            0: {
              items: 1,
              nav: true,
            },
            600: {
              items: 3,
            },
            1000: {
              items: 6,
            },
          },
        })
        .on("changed.owl.carousel", syncPosition2);

      function syncPosition(el) {
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

        if (current < 0) {
          current = count;
        }
        if (current > count) {
          current = 0;
        }
        thumbs
          .find(".owl-item")
          .removeClass("current")
          .eq(current)
          .addClass("current");
        var onscreen = thumbs.find(".owl-item.active").length - 1;
        var start = thumbs.find(".owl-item.active").first().index();
        var end = thumbs.find(".owl-item.active").last().index();

        if (current > end) {
          thumbs.data("owl.carousel").to(current, 100, true);
        }
        if (current < start) {
          thumbs.data("owl.carousel").to(current - onscreen, 100, true);
        }
      }

      function syncPosition2(el) {
        if (syncedSecondary) {
          var number = el.item.index;
          bigimage.data("owl.carousel").to(number, 100, true);
        }
      }

      thumbs.on("click", ".owl-item", function (e) {
        e.preventDefault();
        var number = $(this).index();
        bigimage.data("owl.carousel").to(number, 300, true);
      });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>



    <div>
   <section class="our-blogs-wrapper">
      <div class="outer">
         <div id="big" class="ourBlogsSlider owl-carousel owl-theme">
            <div class="item">
               <div class="container-fluid">
                  <div class="row row-cols-1 row-cols-1 g-5">
                     <div class="col">
                        <div class="card h-100 shadow-none">
                           <div class="card-body">
                              <div class="accordion" id="accordionExample">
                                 <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                       <button class="accordion-button" type="button"
                                          data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                          aria-expanded="true" aria-controls="collapseOne">
                                       Accordion Item #1
                                       </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                       aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                       <div class="accordion-body">
                                          <strong>This is the first item's accordion body.</strong> It
                                          is
                                          shown by default, until the collapse plugin adds the
                                          appropriate
                                          classes that we use to style each element. These classes
                                          control
                                          the overall appearance, as well as the showing and hiding
                                          via
                                          CSS transitions. You can modify any of this with custom CSS
                                          or
                                          overriding our default variables. It's also worth noting
                                          that
                                          just about any HTML can go within the
                                          <code>.accordion-body</code>, though the transition does
                                          limit
                                          overflow.
                                       </div>
                                    </div>
                                 </div>
                                 <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                       <button class="accordion-button collapsed" type="button"
                                          data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                          aria-expanded="false" aria-controls="collapseTwo">
                                       Accordion Item #2
                                       </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse"
                                       aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                       <div class="accordion-body">
                                          <strong>This is the second item's accordion body.</strong>
                                          It is
                                          hidden by default, until the collapse plugin adds the
                                          appropriate classes that we use to style each element. These
                                          classes control the overall appearance, as well as the
                                          showing
                                          and hiding via CSS transitions. You can modify any of this
                                          with
                                          custom CSS or overriding our default variables. It's also
                                          worth
                                          noting that just about any HTML can go within the
                                          <code>.accordion-body</code>, though the transition does
                                          limit
                                          overflow.
                                       </div>
                                    </div>
                                 </div>
                                 <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingThree">
                                       <button class="accordion-button collapsed" type="button"
                                          data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                          aria-expanded="false" aria-controls="collapseThree">
                                       Accordion Item #3
                                       </button>
                                    </h2>
                                    <div id="collapseThree" class="accordion-collapse collapse"
                                       aria-labelledby="headingThree"
                                       data-bs-parent="#accordionExample">
                                       <div class="accordion-body">
                                          <strong>This is the third item's accordion body.</strong> It
                                          is
                                          hidden by default, until the collapse plugin adds the
                                          appropriate classes that we use to style each element. These
                                          classes control the overall appearance, as well as the
                                          showing
                                          and hiding via CSS transitions. You can modify any of this
                                          with
                                          custom CSS or overriding our default variables. It's also
                                          worth
                                          noting that just about any HTML can go within the
                                          <code>.accordion-body</code>, though the transition does
                                          limit
                                          overflow.
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="item">
            </div>
            <div class="item">
            </div>
            <div class="item">
            </div>
            <div class="item">
            </div>
            <div class="item">
            </div>
         </div>
      </div>
   </section>
</div>