this.transferencias.push(transferencia) recebe undefined

Eu estava fazendo o quarto modulo do curso na aula 04 e tudo estava funcionando normal, até que eu realizei mudanças na aula 04 e e o this.transferencias.push(transferencia); recebia só undefined

app.component.ts:

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

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

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

app.component.html:

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

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

nova-transferencia.component.html:

<section class="container">
<form class="formulario" (ngSubmit)="transferir()">
  <h2 class="formulario__titulo">Nova Transferência</h2>

  <div class="form-field">
    <label class="form-field__label" for="valor">Valor</label>
    <input class="form-field__input" id="valor" type="text" [(ngModel)]="valor" name="valor">
  </div>

  <div class="form-field">
    <label class="form-field__label" for="destino">Destino</label>
    <input class="form-field__input" id="destino" type="text" [(ngModel)]="destino" name="destino">
  </div>

  <div class="botao-wrapper">
    <button class="botao" type="submit">Transferir</button>
  </div>

</form>
</section>

nova-transferencia.component.ts:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-nova-transferencia',
  templateUrl: './nova-transferencia.component.html',
  styleUrls: ['./nova-transferencia.component.scss'],
})
export class NovaTransferenciaComponent {
  @Output() aoTransferir = new EventEmitter<any>();
  @Output() valoresComErro = new EventEmitter<string>();

  valor: number;
  destino: number;

  transferir() {
    if (this.ehValido()) {
      const valorEmitir = { valor: this.valor, destino: this.destino };
      this.aoTransferir.emit(valorEmitir);
      this.limparCampos();
    }
  }

  limparCampos() {
    this.valor = 0;
    this.destino = 0;
  }

  private ehValido() {
    const valido = this.valor > 0;
    if (!valido) {
      alert('insira um valor maior que 0');
      this.limparCampos();
    }
    return valido;
  }
}

extrato.component.html:

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

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 {
  @Input() transferencias: any[];

  constructor() {}
}