My <p-table> isn't refreshing after I filter

Question

I'm developing the front-end of a crud application on angular, and when I implemented the filtering by itself it worked just fine. After implementing lazy pagination on my p-table, the filtering stop working as normal.

The filter results are still coming through, but the table is not refreshing, don't know why. I have already searched a lot but couldn't find any answers to this problem.

I'm using angular cli version 13.2.3

Here's my service:

listar(filtro: CidadeFiltro): Observable<any>{
    let params = new HttpParams()
      .set('page', filtro.page)
      .set('size', filtro.size);
    if(filtro.nome){
      params = params.set('nome', filtro.nome);
    }
    else if(filtro.estado){
      params = params.set('estado', filtro.estado);
    }
    return this.http.get<any>(this.cidadesUrl, {params});
  }

Here's my component:

export class CidadesComponent implements OnInit {

  cidades: any[] = [];

  estados:any = [{name: 'MG'}, {name: 'SP'}, {name: 'RJ'}, {name: 'ES'}];

  estadoSelected:any = '';

  filtro = new CidadeFiltro();
  
  //variables

  constructor(private cidadeService:CidadeService) { }

  ngOnInit() {
    this.listar();
  }

  listar(pagina:number = 0){
    this.filtro.estado = this.estadoSelected.name;
    this.filtro.page = pagina;
    this.cidadeService.listar(this.filtro).subscribe(data => {
      const content:any = Object.values(data)[0];
      const registros:any = Object.values(data)[3];
      this.totalRegistros = registros;
      this.cidades = content;
    });
  }

  //unnecessary code

}

table-component:

export class TabelaCidadesComponent extends CidadesComponent {

  @Input() size: any;

  aoMudarPagina(event: LazyLoadEvent): void{
    const pagina = event!.first! / event!.rows!;
    super.startBlock();
    super.listar(pagina);
    const contentKey: any = Object.keys(this.cidades)[0];
    this.cidades = this.cidades[contentKey]
  }

}

Here's my html:

<div *blockUI="'lista-cidades'">
  <p-table [value]="cidades"
    [lazy]="true" [totalRecords]="totalRegistros" (onLazyLoad)="aoMudarPagina($event)"
  [paginator]="true" [rows]="size" responsiveLayout="scroll">

    <ng-template pTemplate="emptymessage">
      <tr><td>Nenhuma cidade encontrada</td></tr>
    </ng-template>

    <ng-template pTemplate="header">
        <tr>
            <th>Nome</th>
            <th>Habitantes</th>
            <th>Estado</th>
            <th>Ações</th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-cidade>
        <tr>
            <td>{{cidade.nome}}</td>
            <td>{{cidade.qtdHabitantes | number}}</td>
            <td>{{cidade.estado}}</td>
            <td class="acoes">
              <button pButton icon="pi pi-pencil" pTooltip="Editar" tooltipPosition="top"></button>
              <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"></button>
            </td>
        </tr>
    </ng-template>
  </p-table>
</div>

request:

result:

Thanks in advance for any help

Any thoughts?