Erro na hora de aplicar o ngFor no extrato.component.html

Eu fui seguindo os passos da aula, porém na hora de aplicar o ngFor no template do componente de extrato está dando erro Mensagem de erro:

Property 'transferencia' does not exist on type 'ExtratoComponent'. Did you mean 'transferencias'?ngtsc(2551)
extrato.component.ts(8, 18): Error occurs in the template of component ExtratoComponent.

Arquivo app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public title = 'bytebank';
  public transferencias: any[] = [];

  transferir(evento) {
    console.log(evento);
    const transferencia = { ...evento, data: new Date() };
    this.transferencias.push(transferencia);
  }
}

Arquivo app.component.html:

<app-nova-transferencia
  (aoTransferir)="transferir($event)"
></app-nova-transferencia>

<app-extrato [transferencias]="transferencias"></app-extrato>

Arquivo extrato.component.ts:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-extrato',
  templateUrl: './extrato.component.html',
  styleUrls: ['./extrato.component.scss']
})
export class ExtratoComponent implements OnInit {
  @Input() transferencias: any[];

  constructor() { }

  ngOnInit(): void {
  }

}

Arquivo extrato.component.html:

<table>
  <thead>
    <th>Data</th>
    <th>Valor</th>
    <th>Destino</th>
  </thead>
  <tbody>
    <tr *ngFor="let transferencia of transferencias"></tr>
    <td>{{ transferencia.data }}</td>
    <td>{{ transferencia.valor }}</td>
    <td>{{ transferencia.destino }}</td>
  </tbody>
</table>

<div *ngFor="let transferencia of transferencias">
  <p>Data: {{ transferencia?.data }}</p>
  <p>Valor: {{ transferencia?.valor }}</p>
  <p>Destino: {{ transferencia?.destino }}</p>
</div>