Error add event with Typescript

[Astro-Otter-Space]

Hello, I'm using your package in a nuxt project (with composition API) and Typescript.

  "@schedule-x/calendar": "^2.2.0",
  "@schedule-x/event-modal": "^2.3.0",
  "@schedule-x/events-service": "^2.2.1",
  "@schedule-x/resize": "^2.2.1",
  "@schedule-x/scroll-controller": "^2.2.1",
  "@schedule-x/theme-default": "^2.2.1",
  "@schedule-x/vue": "^2.1.0",

Nuxt version: 3.13.2 Typescript version: 5.5.3

With createEventsServicePlugin() I have this following message when i'm adding my events on onMount event with (but my events are displayed anymay...) :

Property 'add' does not exist on type 'PluginBase<string>'

My code :

<script setup lang="ts">
import { ScheduleXCalendar } from "@schedule-x/vue";
import {
  createCalendar,
  viewWeek,
  viewMonthGrid,
  viewMonthAgenda,
} from "@schedule-x/calendar";
import { createResizePlugin } from "@schedule-x/resize";
import { createScrollControllerPlugin } from "@schedule-x/scroll-controller";
import { createEventModalPlugin } from "@schedule-x/event-modal";
import { createEventsServicePlugin } from "@schedule-x/events-service";

import type { CalendarEvent } from "@schedule-x/calendar";
// My custom type for events from CMS
import type { ISamEvent, IListSamEvents } from "~/types/calendarEvent";

// Events send with props from parent template
const props = defineProps<{
  listEvents: IListSamEvents;
}>();
const { listEvents } = toRefs(props);

const eventsServicePlugin = createEventsServicePlugin();
const calendarApp = shallowRef(
  createCalendar({
    selectedDate: new Date().toISOString().split("T")[0],
    views: [viewWeek, viewMonthGrid, viewMonthAgenda],
    defaultView: viewMonthGrid.name,
    plugins: [
      createResizePlugin(),
      createScrollControllerPlugin({
        initialScroll: "08:00",
      }),
      createEventModalPlugin(),
      eventsServicePlugin,
    ],
    locale: "fr-FR",
    calendars: {
      work: {
        colorName: "work",
        lightColors: {
          container: "#fff",
          onContainer: "#000",
          main: "#fff",
        },
        darkColors: {
          container: "#000",
          onContainer: "#fff",
          main: "#000",
        },
      },
    },
  }),
);

onMounted(() => {
  setTimeout(() => {
    listEvents?.value.events?.forEach((event: ISamEvent) => {
      calendarApp.value?.eventsService?.add({
        id: event.id,
        title: event.title,
        start: event.start,
        end: event.end ?? event.start,
        description: event.description ?? "",
        location: event.location ?? "",
      } as CalendarEvent);
    });
  }, 500);
});
</script>

<template>
  <div>
    <ClientOnly>
      <ScheduleXCalendar :calendar-app="calendarApp"></ScheduleXCalendar>
    </ClientOnly>
  </div>
</template>

<style scoped>
.sx-vue-calendar-wrapper {
  height: 700px;
  max-height: 90vh;
  width: 100%;
}
</style>

Screenshot :

Thank you :)