Running into something very odd with Bootstrap data-toggle. Here is the code:

<div class="card-header" role="tab" id="tabId">
<a class="d-block" data-toggle="collapse" data-parent="#load-list"
  href="#collapse1-{{$index}}" aria-expanded="false">
  <div class="row">
    <span class="col-auto pr-0">Step {{ $index + 1 }}:</span>
    <span class="col-auto pr-0"> <i class="nuc-icon icon-pin-3"></i> {{ city + ', ' + stateCd }}</span>
  </div>
  <i class="icon icon-down-arrow-1-2 absolute-position"></i>
</a>
</div>
<div id="collapse1-{{$index}}" class="collapse" role="tabpanel">
   <span>Step details</span> 
</div>

When I click on the icon that's supposed to toggle the details panel, it works fine, however it will not collapse when clicked again. What's even weirder is that I'm the only person this is happening to, across multiple environments. There are no errors displayed in the console and it happens using multiple browsers. So I'm not really asking for code help here, more what else can I look for to try and determine what the issue is. Could there be some kind of machine setting that would interfere with this?

The app is written in Angular 12 using Bootstrap 4.5.