Angular FullCalendar dynamic events are not working

Question

I'm using angular 13 and trying to add fullcalendar full calendar is displaying but I'm not able to add events dynamically.

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CalendarOptions } from '@fullcalendar/angular';
import { VacationService } from 'src/app/services/vacation.service';


@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './vacation.component.html'
})

export class VacationComponent  {

  Events: any[] = [];
  color = "red";
  user!: string;
  Datepipe = new DatePipe('en-US');
  event :Array<any> =[{start:'2022-05-01',end:'2022-05-05',display: 'background',backgroundColor:this.color}]

  constructor(private matDialog:MatDialog,private vacationService:VacationService){
  
  }
  
  calendarOptions!: CalendarOptions;

  ngOnInit() {
    this.Events.push(this.event)
    setTimeout(() => {
      this.calendarOptions = {
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick.bind(this),
        events: this.Events,
      
      };
      console.log(this.Events)
    }, 2500);
  }

}

in 2.5s I can see the logs in the console. but dateclick and events are not working. both click and events work when I hard code it like below

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    dateClick: this.handleDateClick.bind(this), 
    events : this.events
   
  };