Контекст

Я использую FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2 и Typescript v4.3.5.

Я хотел создать простой календарь на основе Документация FullCalendar, поэтому я создал компонент Calendar, содержащий этот код:

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;

Моя проблема

Где я проверяю console.info, я вижу эту ошибку:

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

Я провел исследование и обнаружил, что мы можем использовать динамический импорт с Next.js, чтобы отключить SSR для компонента, но после некоторых попыток я не могу понять, как работает динамический импорт.

Вот код, который я начал пробовать, не найдя способа заставить его работать:

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

И ошибка, которую я получаю:

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

Я новичок в Next.js и FullCalendar, поэтому, вероятно, я что-то неправильно понимаю, особенно в отношении динамического импорта. Кто-нибудь знает, что я делаю неправильно или как правильно использовать FullCalendar с Next.js?