Listening to the Bootstrap collapse shown/hidden events?

I have a Bootstrap 5 accordion that looks like this:

<div class="accordion" id="my_accordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading_bar">
      <button class="accordion-button collapsed bg-light my-collapse" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_bar" aria-expanded="false" aria-controls="collapse_bar">Bar</button>
    </h2>
    <div id="collapse_bar" class="accordion-collapse collapse" aria-labelledby="heading_bar" data-bs-parent="#my_accordion">
      <div class="accordion-body">
        ...
      </div>
    </div>
  </div>
</div>

I am trying to listen to the shown and hidden events like described in the collapse docs:

return $('button.my-collapse[data-bs-toggle="collapse"]').on('shown.bs.collapse', function(e) {
  console.log("This is not fired...")
});

But for some reason the events do not fire. I know that I have the right selector, because if I change shown.bs.collapse to click an event occurs.

Any idea what's happening?

Btw, my logic also seems to work for tabs like this:

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="debug_tab" role="tablist">
      <li class="nav-item"><a class="nav-link my-tab" id="products-tab" data-bs-toggle="tab" href="#foo" role="tab" aria-controls="foo" aria-selected="false">Foo</a></li>
    </ul>
  </div>
  <div class="card-body">
    ...
  </div>
</div>

when I listen like this:

return $('a.my-tab[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
  console.log("This is fired...")
});