I am using Angular Material UI’s HTTP table to render content from the DB and I am experiencing this weird bug.

Initially when the page loads, the direction of this arrow is being always to the top.
So it’s behavior should be, when I click it, the arrow should point down, and sort the data accordingly. For the first time when I click it, The arrow is still pointing up and the data below is being sorted. And for the second time when i click it, the arrow is changing and the data is getting sorted again.

Did anyone face this bug? Heads up will be appreciated.

Here are the code snippets.

components.ts

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    // this.sort.direction = 'desc';
    this.sort.sortChange.subscribe((sortEvent) => {
      console.log("Sort Event: ", sortEvent)
      this.sortBy = sortEvent.active;
      this.sortOrder = sortEvent.direction || "desc";
      // this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      this.page = 1;
      this.getDocumentTypes();
    });
  }

components.html

<ng-container matColumnDef="documentTypeDisplayValue">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Document Type</th>
        <td
          mat-cell
          *matCellDef="let element"
          [matTooltip]="element.documentTypeId"
        >
          <ng-container *ngIf="element.isEditable; else viewMode">
            <mat-form-field class="editable-input">
              <input matInput [(ngModel)]="element.documentTypeDisplayValue" />
            </mat-form-field>
          </ng-container>
          <ng-template #viewMode>{{
            element.documentTypeDisplayValue
          }}</ng-template>
        </td>
      </ng-container>

components.scss

.mat-sort-header-arrow {
    color: white;
    opacity: 1 !important; 
    visibility: visible;
  }

I tried solving this with CSS and JS both ends but didn’t work out.