I am using Bootstrap accordion in my stenciljs app as follows:

    <div class="ba-accordion">
        <div class="accordion-item">
          <div class="accordion-header" id="kpf-accordion-nachrichtenverlauf-heading">
            <button class="accordion-button" id="accordion-button"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#kpf-accordion-nachrichtenverlauf-panel"
                    aria-expanded="false"
                    aria-controls="kpf-accordion-nachrichtenverlauf-panel" onClick={()=>{this._nachrichtenVerlaufPanelClickHandler()}}
                    >
              <p class="kpf-nachrichtenverlauf">Message History</p>
            </button>
          </div>
          <div id="kpf-accordion-nachrichtenverlauf-panel"
               class="accordion-collapse collapse"
               aria-labelledby="kpf-accordion-nachrichtenverlauf-heading"
               >
            <div class="accordion-body">
                
            </div>
          </div>
        </div>
      </div>

It works properly when I test locally with npm start but when I run the app on nginx Server, then it opens once and does not close. On analyzing the elements in browser, I see that the panel item div with id="kpf-accordion-nachrichtenverlauf-panel" always has the class show and if direcly remove it in browser, it closes but if I do this progrmmatically, nothing happens and the accordion remains open. Following is the Javascript click handler code:

  private _nachrichtenVerlaufPanelClickHandler() {

    var nachrichtenVerlaufHeading = document.getElementById('accordion-button');
    var panel = document.getElementById('kpf-accordion-nachrichtenverlauf-panel')



    if(nachrichtenVerlaufHeading.getAttribute('aria-expanded') === "true") {
      console.log("INSIDE THE IF");
       panel.classList.remove('show');
  }
}

The behaviour is the same in Edge and Chrome. How can I fix this thing?