`active` class not switching based on `route` update

on load of new route the active class not switching to new tab. I am not able to find the solution for this.

but the new page is loading without any issue. the only issue is the active class not switching to new page and not remove from the old page.

how to fix this?

here is my hbs file :

<div class="navbar-sub-header navbar-sub-header---tab-bar" style="border:1px solid red;">
        <div class="rdc-tab-bar">
            
                Credit Card //by default active added
            
            
                Online Baning //when click page loads, active not swithing
            
        </div>
    </div>

my router.js :

 this.route('auth-page', function() {
    this.route('credit-card', function() {
      this.route('credit-cardno');
      this.route('credit-otp'); //works fine
    });
    this.route('i-banking'); //not updating to active state
  });