Create nested accordion with custom accordion header and custom leaf nodes using bootstrap

Question

I trying to create a deeply nested accordion where nesting is not known in advance. Nesting will be decided based on the JSON response. I am using a bootstrap to create the accordion.

So I need custom accordion header. so that it does not open when I click on the header div.. it should only open on click of toggle button on the right.. as I have to handle the different event on the click on the header itself.

This is the code which I have written till now, it checks if item has children then create accordian for it.. else for leaf nodes.. it create normal buttons..

<div class="accordion" [attr.id]="entityName">
    <div class="accordion-item">
      <div class="pageNameTab mb-1" [id]="'heading-'+ entityName">
        <ng-container *ngIf="!children || children.length === 0; else hasChildrenBlock">
          <!-- Render leaf node without toggle button -->
          <button class=" pageButton col-12 btn rounded-0 text-left"
          (click)="onVeClick(entityName)"
          [ngClass]="entityName === selectedVe  ? 'btn-light-primary' : ''"
          >
      <div class=" row mb-0 pb-1">
          <div class=" col-10 d-flex">
              {{entityName}}
          </div>
      </div>
  </button>
        </ng-container>
        <ng-template #hasChildrenBlock>
          <!-- Render node with toggle button -->
          <button class="pageButton col-12 btn rounded-0 text-left mat-tree-node"
                  data-bs-toggle="collapse"
                  [attr.data-bs-target]="'#'+entityName+'-1'"
                  [attr.aria-controls]="entityName+'-1'"
                  (click)="onVeClick(entityName)" [ngClass]="entityName === selectedVe ? 'btn-light-primary' : ''">
            <div class="row mb-0 pb-1">
              <div class="d-flex">
                {{ entityName }}
              </div>
            </div>
          </button>
        </ng-template>
      </div>
      <div *ngIf="children && children.length > 0">
        <!-- Bootstrap Accordion Body -->
        <div [id]="entityName+'-1'" class="accordion-collapse collapse"
              [attr.aria-labelledby]="'heading-'+ entityName" 
              [attr.data-bs-parent]="'#'+ entityName">
          <div class="accordion-body pt-2 pb-0 pr-0">
            <!-- Recursive call for nested accordion -->
            <app-accordian-item *ngFor="let child of children" [entityName]="child.entityName"
                    [children]="child.children" [selectedVe]="selectedVe" (itemClick)="onChildItemClick($event)">
            </app-accordian-item>
          </div>
        </div>
      </div>
    </div>
  </div>

So is there any way to achieve customize bootstrap default behaviour and add our own button and click event there.