Why does my routerLinkActive CSS tag for navigation dropdown work with one but not the other?

Question

(Angular 13 app) I have a few dropdowns on my navbar and I want to style them when the routerLinkActive is triggered. When one of the dropdown items is clicked in the nav dropdown, I want it to add a .active class (.active css not shown here, but it exists, I promise).

The code below shows 2 of the dropdowns but there are more. So for Reports (which is the 4th dropdown on the navbar, not the first) everything works. If I click test3, the dropdown header 'reports' gets the .active css. however, for readiness (or any of the other dropdowns) only the first item in the drop down will trigger the .active css to apply to the header.

So what is the difference between Report and Readiness that would make it work perfectly for Report but not for Readiness? (more info below code)

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownReadiness" role="button" data-bs-toggle="dropdown" aria-expanded="false"
         [class.active]="readinessLinkRef.isActive">
        Readiness
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdownReadiness">
        <li><a class="dropdown-item" routerLink="item1" routerLinkActive #readinessLinkRef="routerLinkActive">Item1</a></li>
        <li><a class="dropdown-item" routerLink="item2" routerLinkActive #readinessLinkRef="routerLinkActive">Item2</a></li>
        <li><a class="dropdown-item" routerLink="item3" routerLinkActive #readinessLinkRef="routerLinkActive">item3</a></li>
      </ul>
    </li>

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
         [class.active]="reportLinkRef.isActive">
        Reports
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" routerLink="test1" routerLinkActive #reportLinkRef="routerLinkActive">Test1</a></li>
        <li><a class="dropdown-item" routerLink="test/test2/" routerLinkActive #reportLinkRef="routerLinkActive">Test2</a></li>
        <li><a class="dropdown-item" routerLink="test/test3" routerLinkActive #reportLinkRef="routerLinkActive">Test3</a></li>
  
      </ul>
    </li>

More info to help diagnose:

1. When I duplicate Report exactly, it works (but will add the active tag to both the nav headers since they're exactly the same code)
2. if I change anything to the duplicated code, it stops working or does strange things, such as: a) add the .active styling to random headers b) add the .active styling to the original Report header, but not to the current one c) add the .active styling to both the original and duplicated Report header
3. I tried changing the Ids, it didn't help at all.
4. I tried changing the names of the link ref (such as #reportLinkRef) to very different names, such as "TestRef" or "qwerty". Just random, very different names. But it didn't help.
5. I tried changing the order of the navbar dropdowns. Nothing changed.
6. I tried deleting the whole Reports dropdown from the navbar to see if a different dropdown would start working, but none of them work even when Reports is gone.
7. I thought maybe it had something to do with the routerLink being "test/test1" rather than just "test1", but the other dropdowns have "admin/admin1" and they don't work either.
8. I try clicking on one under Readiness, then a completely different one, then back on Readiness and nothing happens. 9)If the first option (item1) under Readiness is clicked, readiness will get the .active class. But then if I click any other option (item2, item3) or on another dropdown (test1....), the .active class is removed. Again, this does not happen with Reports; test1, test2, test3 will all trigger Reports to have the .active class.
9. I've tried restarting the app, restarting visual studio, and restarting my computer.
10. I have tried clearing cache.