Bootstrap: Accordion buttons active, while body collapsed

Question

I am populating a Bootstrap Accordion with content (from Orders) from an array in Angular.

My problem is, that while it technically works, all the accordion buttons are displayed as active (pressed), although the body itself is already collapsed (as intended).

Here's the Orders component:

<div class="accordion" id="accordionOrders">
    <div class="accordion-item" *ngFor="let order of orders">
        <order [order]="order"></order>
    </div>
</div>

The Order Component takes the specific order details and displays them. Here is the Order components template:

<h2 class="accordion-header" [id]="'heading'+order.orderId">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" 
            [attr.data-bs-target]="'#collapse'+order.orderId" aria-expanded="false" 
            [attr.aria-controls]="'collapse'+order.orderId">
        Order #{{ order.orderId }}, ordered at {{ order.orderDate | date:'hh:mm' }}
    </button>
</h2>

<div [id]="'collapse'+order.orderId" class="accordion-collapse collapse" 
        [attr.aria-labelledby]="'heading'+order.orderId" 
        data-bs-parent="#accordionOrders">

    <div class="accordion-body">
        Here goes the content
    </div>
</div>

I wondered if the nesting of a Angular component within the Accordion structure might cause the problem, but it works - except for the active buttons. When I nested a HTML element at the same position in Codepen, everything works fine as well.

I am a novice and just can't figure out what I am overseeing.