Angular Sort, Filter, Paginate table in Observable<any[]>

Question

I have set my service and components like this but in component.ts the below listed properties does not exist on type 'Observable<any[]>'.ts(2339)

• MatSort
• Sort
• MatPaginator
• Filter

api.Service.ts

private apiURL = "https://localhost:55244/api";
  constructor(private http: HttpClient) { }
  getBranches():Observable<any[]> {
    return this.http.get<any[]>(this.apiURL + '/Branches')
      .pipe(catchError(this.errorHandler));
  }

Component.ts

  branchList$!: Observable<any[]>;
  branchTypesList$!: Observable<any[]>;
  branchTypeMap: Map<Number, String> = new Map;
  displayedColumns: string[] =  ['id','branchName'];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  public ngOnInit(): void {
    this.branchList$ = this._deiapiClient.getBranches();
    this.branchList$.MatSort = this.sort;
    this.branchList$.MatPaginator = this.paginator;
  }

component.html

    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    <div class="mat-elevation-z8">
        <table mat-table [dataSource]="branchList$" matSort matSortActive="branchName">

            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
                <td mat-cell *matCellDef="let item"> {{item.id}} </td>
            </ng-container>
            <ng-container matColumnDef="branchName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
                <td mat-cell *matCellDef="let item"> {{item.branchName}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    </div>