Control mat-select not update mat-active class after change an option dynamically

I am making an angular material dropdown (mat-select) that is populated dynamically by an array in my typescript class. Additionally, I have another control that updates the selected option for this dropdown. All works fine, the option on the mat-selected control is selected when I click my second control but the mat-active CSS class is still on the previously selected option.

So, I have this mat-select

<mat-form-field>
  <mat-label>Selected Id</mat-label>
  <mat-select [(value)]="sessionID">
    <mat-option *ngFor="let sessionID of sessions" [value]="sessionID">
      {{sessionID}}
    </mat-option>
  </mat-select>
</mat-form-field>

Then I have a mat-paginator that acts as additional navigation of my select control.

<mat-paginator [length]="sessions?.length" [pageSize]="1"
     [hidePageSize]="true"
     [showFirstLastButtons]="true"
     [pageIndex]="sessionIndex"
     (page)="setSession($event.pageIndex)">
</mat-paginator>

In the typescript class, I have the array of options and setSession method that select the value in the dropdown:

sessions: string[] = ['opt1', 'opt2', 'opt3'];

setSession(index: number) {
    this.sessionID = this.sessions[index]
}

As I said before, all works fine, but in the view, there is an issue with the CSS of the dropdown and the previous option remains the mat-active class.

Do you have any idea whats I am missing in my implementation?

Source: Angular Material Quesions