Why I don't receive my event when I pass event from my child component using eventEmitter?

Question

I have tried to the event using eventEmitter but in somehow, the event is not being pass.

Here is the child component where I try to pass the object with eventEmitter

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


@Component({
  selector: 'app-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
  @Input('isFavorite') isFavorite?: boolean
  @Output() change = new EventEmitter();
  constructor() { }

  ngOnInit(): void {
  }
  onClick(){
    this.isFavorite = !this.isFavorite
    console.log(this.isFavorite)
    this.change.emit({newValue: this.isFavorite});
  }

}

Here is my template of my Child component:

<p>favorite works!</p>
<button (click)=onClick()>click</button>

Here is the parent component where I want to pass my event to:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-ly';
  post = {
    title: "Title",
    isFavorite:false
  }
  onFavoriteChange(isFavorite:any){
    console.log("Favourite change",isFavorite);
    console.log(isFavorite)
  }
}

Here is the template of my parent component:

<app-favorite [isFavorite]="post.isFavorite" (change)="onFavoriteChange($event)"></app-favorite>

I try to the print the event that I pass from my child component into the console and here is what I got:

true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined