Context

I'm using FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2 and Typescript v4.3.5.

I wanted to create a simple calendar, based on FullCalendar documentation, so I've created a Calendar component that is containing this code:

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import Card from '../Card/Card';
import styles from './Calendar.module.scss';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

type CalendarProps = {
  className?: string;
};

const Calendar = ({ className }: CalendarProps) => {
  return (
    <Card
      className={
        styles.calendarWrapper +
        (className !== undefined ? ' ' + className : '')
      }
    >
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        locale='fr'
        firstDay={1}
        headerToolbar={{
          start: 'prev next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        }}
        businessHours={{
          // days of week. an array of zero-based day of week integers (0=Sunday)
          daysOfWeek: [1, 2, 3, 4, 5], // Monday - Thursday

          startTime: '7:00', // a start time
          endTime: '23:00', // an end time
        }}
        nowIndicator={true}
        selectable={true}
        selectMirror={true}
        weekNumbers={true}
        weekNumberFormat={{ week: 'numeric' }}
        initialView='dayGridMonth'
        eventColor='var(--sw-color-accent-300)'
        eventTextColor='var(--sw-color-primary-900)'
      />
    </Card>
  );
};

export default Calendar;

My problem

Where I'm checking the console.log, I can see that error:

Warning: Prop `id` did not match. Server: "fc-dom-1" Client: "fc-dom-2"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I've done research and I found that we can use dynamic import with Next.js to disable SSR for a component, but after some tries I can't understand how dynamic imports are working.

Here is the code I started to try, without finding a way to make it works:

const FullCalendarWithNoSSR = dynamic(
  () => import('@fullcalendar/react').then((mod: any) => mod.FullCalendar),
  { ssr: false }
);

And the error I get:

Error: Please import the top-level fullcalendar lib before attempting to import a plugin.

I'm new with Next.js and FullCalendar, so I'm probably misunderstanding something, especially about dynamic imports. Does someone have an idea of what I'm doing wrong or how to use FullCalendar properly with Next.js?