Full Calender not allow to Create continuous event

I am using fullCalendar with initialView: 'resourceTimeline', and I am faching some issues:

Date 22/03/2022 has two events 12 am to 5 am and 5 am to 9 am -> this is not allowing me to add continuously Date 23/03/2022 has two event: 12 am to 5 am and 5.15 am to 9 am -> this is successfully added

Screenshot of the issue:

On 22/03/2022 when I create the first event to start selecting in calender time 12am to 5am it will create properly. But after that I try to create the second event from 5 am to 9 am, it is not allowing it as the "block" icon is appearing automatically (you can see in the screenshot).

But it is allowing me to select from 5.15 am.

So my question is why it is not allowing me to create a second continuous event? 12 am to 5 am event is ok but after then 5 am to 9 I am not allowed.

I have set the following calendar options:

calendarOptions: CalendarOptions = {
  plugins: [interactionPlugin, resourceTimelinePlugin],
  resourceAreaColumns: [ {  field: 'title', headerContent: 'Date' }],
  resources: this.makeResourceData(),
  resourceOrder: 'orderVal',
  events: this.events,
  initialView: 'resourceTimeline',
  selectable: true,
  editable: false,
  eventResizableFromStart: true,
  eventOverlap: false,
  selectOverlap: false,
  slotDuration: '00:15:00',
  height: 'calc(100vh - 181px)',
  resourceAreaWidth: '150px',
  slotMinWidth:1,
  eventDurationEditable: false, // Disable Resize
  eventStartEditable: false, // disable dreage drop
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  },
  headerToolbar: false,
  dayHeaderFormat: { weekday: 'short', month: 'numeric', day: 'numeric' },
  eventDidMount: this.renderPopHover.bind(this), // call before click event
  eventClick: (arg: EventClickArg) => this.selectEvent(arg),
  select: (arg: DateSelectArg) => this.addEvent(arg),
}


// load at first time with Old Schedules
arrangeSchedules(objSheduleData) {
this.generateEventId = 0;
this.events = [];
objSheduleData.forEach(element => {
    if (element.scheduleDetails && element.scheduleDetails.length > 0) {
        element.scheduleDetails.forEach(element12 => {
            const startDate = new Date();
            startDate.setSeconds(0);
            startDate.setHours(element12.startTime.hour);
            startDate.setMinutes(element12.startTime.miniute);
            const endDate = new Date();
            endDate.setSeconds(0);
            endDate.setHours(element12.endTime.hour);
            endDate.setMinutes(element12.endTime.miniute);
            let timeText = this.datePipe.transform(startDate, 'hh:mm a')
            timeText = timeText + ' - ' + this.datePipe.transform(endDate, 'hh:mm a')
            this.events.push({
                eventId: this.generateEventId + 1,
                resourceId: new Date(element.date).toDateString(),
                date: new Date(element.date),
                title: timeText,
                start: startDate,
                end: endDate,
                textColor: 'white',
                backgroundColor: '#0D7257',
                doctorScheduleDisplayType: element12.doctorScheduleDisplayType,
                locationId: element12.locationId,
                isOverbookingAllow: element12.isOverbookingAllow,
                overBookingLimit: element12.overBookingLimit,
                frequency: element12.frequency,
                id: element.id
            });
            this.generateEventId = this.generateEventId + 1;
        });
    }
});
this.loadEvents(this.events);
}

addEvent($event) {
if (this.isManagingInOldDate($event)) {
    this.notificationService.openError(this.translateService.instant('Can_CTtCreateOldDateSchedule'));
} else {
    this.selectedEventArray = [];
    this.deleteButtonVisible = false;
    if (this.events.length === 0) {
        this.generateEventId = 0;
    }
    const oldDate = new Date($event.resource._resource.id);
    const resourceId = oldDate.toDateString();
    this.generateEventId = this.generateEventId + 1;
    const addNewEvents = this.events;
    let timeText = this.datePipe.transform($event.start, 'hh:mm a')
    timeText = timeText + ' - ' + this.datePipe.transform($event.end, 'hh:mm a')

    const event = {
        eventId: this.generateEventId,
        title: timeText,
        resourceId: resourceId,
        start: $event.start,
        backgroundColor: '#5782FA',
        end: $event.end,
        textColor: 'white',
    };
    addNewEvents.push(event);
    this.selectedEventArray.push(event);
    this.loadEvents(addNewEvents);
}
}

loadEvents(finalEvents) {
let calendarApi;
if (this.calendarComponent) {
    calendarApi = this.calendarComponent.getApi();
}
this.events = [];
for (const event of finalEvents) {
    this.events.push(event);
}
if (calendarApi) {
    calendarApi.setOption('events', this.events);
}
}

Need To set Milli seconds also and it Working

startDate.setMilliseconds(0);
endDate.setMilliseconds(0);