Filtering don´t work MatTableDataSource - Angular

Question

I made a table with Angular Material, and used MatTableDataSource to filter the data from a search bar. However, although the column titles are rendered, my data is not displayed. Does anyone know what the problem is. I'm using Angular 13 with Json server for testing.

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Patient } from 'src/app/patients/model/patient';
import { PatientsService } from 'src/app/patients/patients.service';


@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent implements OnInit {

  patients: Patient[] = []
  dataSource = new MatTableDataSource(this.patients)

  displayedColumns = ["name", "cpf", "cityFrom", "surgeon"]

  constructor(private patientsService: PatientsService) { }

  ngOnInit(): void {
    this.patientsService.read().subscribe(resp => {
      this.patients = resp
    })

  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase()
  }
}

<form class="search-bar">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Pesquisar</mat-label>
    <span matPrefix class="material-icons icons">search</span>
    <input (keyup)="applyFilter ($any($event.target).value)"  matInput placeholder="Pesquisar" >
  </mat-form-field>
</form>

<div class="div-table">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z4 table">

    Name Column
    <ng-container matColumnDef="name">
      <th class="table-title" mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    ...
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>