Custom components don't work properly when using fullcalendar

[skazuya1]

I'm creating a custom component using fullcalendar, but the calendar isn't displayed.
The js code is as follows.

import { createCustomElement } from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

createCustomElement('fullcalendar-component', {
    renderer: { type: snabbdom },
    styles,
    view() {
        return (
            <div id="calendar" style={{ width: '100%', height: '100%' }}></div>
        );
    },
    connectedCallback(elem) {
        const calendarEl = elem.shadowRoot.getElementById('calendar');

        const calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin, interactionPlugin],
            initialView: 'dayGridMonth',
            selectable: true,
            events: [
                { title: 'テストイベント', start: '2025-09-25' }
            ],
            select: function(info) {
                const title = prompt('イベント名を入力してください:');
                if (title) {
                    calendar.addEvent({
                        title: title,
                        start: info.startStr,
                        end: info.endStr
                    });
                }
            }
        });

        calendar.render();
    }
});