Cannot create new event - react

[psuplat]

Hi,

I've been struggling with this for few days now, went through docs and tons of examples on the web, but I simply cannot get the calendar event creation popup to appear. If an event is there, I can click it, open the edit pop and all, works just fine. But the click on any empty spaces it just has no interaction, nothing happens.

Can someone please let me know what I am missing here:

import React, { useEffect, useState, useCallback } from 'react';
import axios from "axios";

// comnponents
import Calendar from '@toast-ui/react-calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';


// 
export default function MyCalendar(props) {
    const calendars = [
        { id: 'cal1', name: 'Main', backgroundColor: '#199BB5', borderColor: '#199BB5', isReadOnly: false, },
        { id: 'cal2', name: 'OOO', backgroundColor: '#ccc', borderColor: '#ccc', isReadOnly: false, },\
    ];
    const [eventDetails, setEventDetails] = useState([]);

    const onAfterRenderEvent = (event) => {
        console.log('grab event  via fetch');
    };


    useEffect(() => {
        //grab events
        axios.get(`/get-booking-events/?start=2023-10-16T00:00:00+02:00&end=2023-10-22T00:00:00+02:00`,)
            .then(res => {
                //console.log(res.data);
                let events = res.data.map((item, index) =>
                ({
                    calendarId: 'cal1',
                    title: item.title,
                    start: item.start,
                    end: item.end,
                })
                );
                //setEventDetails(events)
                setEventDetails(eventDetails => [...eventDetails, ...events]);
                //setEventDetails(eventDetails => [...eventDetails, events]);
                console.log('grabbing events', eventDetails)
            })
        //console.log
    }, []);

    return (
        <>
            <div className="my-10">
                <Calendar
                    month={{
                        dayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
                        visibleWeeksCount: 3,
                        startDayOfWeek: 1,
                    }}
                    week={{
                        startDayOfWeek: 1,
                        taskView: false
                    }}
                    useFormPopup="true"
                    useDetailPopup="true"
                    useCreationPopup="true"
                    isReadOnly="false"
                    usageStatistics="false"
                    view="week"
                    taskView={['task']}
                    scheduleView={['allday', 'time']}
                    calendars={calendars}
                    events={eventDetails}
                    onAfterRenderEvent={onAfterRenderEvent}
                    disableDblClick={true}
                    disableClick={false}
                />
            </div>

        </>
    )
}