My <p-table> values aren't updating after filtering

Question

on my application front-end, when i do the filtering to my my variable cidades: Cidade[] = []; receive the values, yet my table doesn't show them. I already tried instantiating a new array by this.cidades = [...this.cidades], but it didnt work.

Also when i do the filters and there's more than one page of results, and I try to navigate between them, the filters are cleared, dont know why.

Cidades component.ts:

export class CidadesComponent implements OnInit {

  @ViewChild('grid') grid: any;

  cidades: Cidade[] = [];

  estado = new Estado();

  estados = [];

  estadoSelected:any = null;

  filtro = new CidadeFiltro();
  pageable = new Pageable();

  totalRegistros = 0;

  @BlockUI('lista-cidades') blockUI!: NgBlockUI;

  constructor(private cidadeService:CidadeService, private messageService: MessageService ) { }

  ngOnInit() {
    this.listar(0);
    this.estados = this.estado.estados;
  }

  listar(pagina:number){
    this.blockUI.start();
    this.filtro.estado = this.estadoSelected?.name;
    this.pageable.page = pagina;
    console.log(this.filtro);
    this.cidadeService.listar(this.filtro, this.pageable).pipe(finalize(() => this.blockUI.stop())).subscribe(data => {
      this.totalRegistros = data.totalElements;
      this.cidades = data.content;
    }),
    retry(3),
    catchError(error => {
      console.log('Não foi possível listar as cidades');
      return of(0);
    });
  }

    ...other methods

Cidades component.html:

<div class="container">

  <div class="grid">

    <div class="col-12">
      <h1>Cidades</h1>
    </div>

    <form autocomplete="off">

      <div class="col-12 p-fluid">
        <label>Nome</label>
        <input pInputText type="search" name="nome" [(ngModel)]="filtro.nome">
      </div>

      <div class="col-12 p-fluid">
        <label style="display: block;">Estado</label>
        <p-dropdown [required]="true" [filter]="true" [options]="estados" [(ngModel)]="estadoSelected" #estado="ngModel" name="estados" optionLabel="name" placeholder="Selecione"></p-dropdown>
      </div>

      <div class="col-12">
        <button pButton type="button" class="p-button-info" (click)="listar(0);">Pesquisar</button>
      </div>

    </form>

  </div>

  <app-tabela-cidades [registros]="totalRegistros" [size]="pageable.size"></app-tabela-cidades>

  <div class="col-12">
    <a pButton label="Nova Cidade" routerLink="/cidades/new"></a>
  </div>

</div>

Table-cidades.component.ts:

export class TabelaCidadesComponent extends CidadesComponent {

  @Input() size: any;
  @Input() registros!: number;

  aoMudarPagina(event: LazyLoadEvent): void{
    const pagina = event!.first! / event!.rows!;
    super.listar(pagina);
    console.log("clicando do paginador")
  }

}

Table-cidades.component.html:

<div *blockUI="'lista-cidades'">
  <p-table [value]="cidades" #grid
    [lazy]="true" [totalRecords]="registros" (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" [routerLink]="['/cidades', cidade.id]"></button>
              <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"
              (click)="deletar(cidade)"></button>
            </td>
        </tr>
    </ng-template>
  </p-table>
</div>

Method GET on service

listar(filtro: CidadeFiltro, pageable: Pageable): Observable<any>{
    const options = RequestUtil.buildOptions(Object.assign(filtro, pageable));
    return this.http.get<any>(`${this.cidadesUrl}`, options);
  }

Can someone help?