Angular Material MatPaginator показывает страницу 0 из 0

заранее извините за вопрос. Я погуглил свою проблему, прежде чем писать это, и перепробовал множество решений, но безуспешно. Я новичок в Angular, пытающийся изучить Material. Мой простой проект делает http-запрос и использует полученный JSON для заполнения таблицы. Таблица Angular Material работает нормально, а paginator - нет. Он отображается серым цветом и показывает страницу 0 из 0.

Компонент .html выглядит следующим образом:

<div style="height: 80vh;">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span>Teste - Requisição Http/Tabela</span>
      <span class="menu-spacer"></span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a (click)="sidenav.toggle()" mat-list-item>Fechar</a>
        <a href="#" mat-list-item>Link 1</a>
        <a href="#" mat-list-item>Link 2</a>
        <a href="#" mat-list-item>Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>

        <ng-container matColumnDef="first_name">
          <th mat-header-cell *matHeaderCellDef> First Name </th>
          <td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
        </ng-container>

        <ng-container matColumnDef="last_name">
          <th mat-header-cell *matHeaderCellDef> Last Name </th>
          <td mat-cell *matCellDef="let element"> {{element.last_name}} </td>
        </ng-container>

        <ng-container matColumnDef="avatar">
          <th mat-header-cell *matHeaderCellDef> Avatar </th>
          <td mat-cell *matCellDef="let element"> {{element.avatar}} </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]" showFirstLastButtons></mat-paginator>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

Компонент .ts выглядит следующим образом:

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export interface UserData {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

const USER_DATA: UserData[] = [];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Test';
  url = 'https://reqres.in/api/users?page=1';
  displayedColumns: string[] = ['id', 'email', 'first_name', 'last_name', 'avatar'];
  dataSource = new MatTableDataSource<UserData>(USER_DATA);
 
  constructor(private http: HttpClient) {
  
    this.http.get(this.url).toPromise().then(data => {
      console.log(data["data"]);
      this.dataSource = data["data"]
      console.log(this.dataSource)
    });
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
}

Что я делаю не так? Спасибо