How to avoid displaying duplicate events in full calendar

Question

I am having an issue with duplicate events displaying in my calendar. I have all my events organized by me shown and the events can be held in different rooms, if I also click the room this function is called and duplicated events that are held in that room.

onRoomClick(roomId: number, isChecked: boolean): void {
    const calendar = this.fullCalendar.getApi();
    const eventTypePrefix = `room_${roomId}_`;
    if (isChecked) {
      this._appointmentsService.getRoomEvents(roomId).subscribe({
        next: (roomEvents) => {
          const events = roomEvents.map(event => ({
            ...event,
            id: `${eventTypePrefix}${event.id}`,
            color: this.generateColor(roomId.toString()),
          }));
          calendar.addEventSource(events);
        },
        error: (error) => {
          this._snackbarService.open(error, { type: 'error' });
        }
      });
    } else {
      const eventsToRemove = calendar.getEvents().filter(event => event.id.startsWith(eventTypePrefix));
      eventsToRemove.forEach(event => event.remove());
    }
  }

Let's say 100 events, and if 20 events are scheduled in ROOM 1, clicking on ROOM 1 results in adding all 20 events again, causing duplicates.

Here is how one of events looks before clicking the room:

Here is how it looks after clicking the room:

I'm using Angular 15 and FullCalendar 6 for this implementation.