Внешние события не "падают" в реакции

Question

Как и многие другие, я пытаюсь использовать Полный календарь с React. И, как и многие люди, пытающиеся заставить его зарегистрировать сброс внешних событий. Я включаю весь свой класс. Пожалуйста, помогите, и если мы сможем заставить это работать, я могу обновить пример, и никто не должен терять волосы, как у меня.:)

Я перепробовал каждую комбинацию.. буквально. Я закончил тем, что использовал плагин обертки, так как Календарь только продолжал дуть.

Я уверен, что это связано с тем, как я загружаю плагины или как я передаю перетаскиваемые данные. Я только что создал простой div над календарем, и я могу перетащить его, и он и календарь будут выделены, когда я перетаскиваю.. bt, когда я перетаскиваю, ни один регистр даже... ничего... нада.. пшик.

У кого-нибудь есть предложения?

import React, { Component } from "react";
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/';
import '../styles/calendar.css'

import 'fullcalendar-reactwrapper/dist/css/fullcalendar.min.css'
import FullCalendar from 'fullcalendar-reactwrapper';
import { dayGrid } from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
// import  {Calendar } from '@fullcalendar/core';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
class MyCalendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            events: [
                {
                    title: 'All Day Event',
                    start: '2017-05-01',
                    color: '#257e4a'
                },
                {
                    title: 'Long Event',
                    start: '2017-05-07',
                    end: '2017-05-10',
                    rendering: 'background'
                },
                {
                    id: 9,
                    title: 'Repeating Event  background',
                    start: '2017-05-09T16:00:00',

                    color: '#ff9f89',
                    textColor: 'red'
                },
                {
                    id: 99,
                    title: 'Repeating inverse-Event',
                    start: '2017-05-16T16:00:00',
                    rendering: 'inverse-background',

                },
                {
                    title: 'Conference',
                    start: '2017-05-11',
                    end: '2017-05-13'
                },
                {
                    title: 'Meeting',
                    start: '2017-05-12T10:30:00',
                    end: '2017-05-12T12:30:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2017-05-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2017-05-28'
                }
            ],
        }
    }
    handleSelect = ({ start, end }) => {
        console.log('select', start, end);
        // const title = window.prompt('New Event name')
        // if (title)
        //   this.setState({
        //     events: [
        //       ...this.state.events,
        //       {
        //         start,
        //         end,
        //         title,
        //       },
        //     ],
        //   })
    }
    drop(args) {
        console.log('drop', args);
    }
    eventRecieve(args) {
        console.log('eventRecieve', args);
    }

    click(args) {
        console.log('click', args);
    }

    select(args) {
        console.log('select', args);
    }

    onDragStart = (ev, id) => {
        console.log('drag start', ev, id);
        ev.dataTransfer.setData("id", id);
    }

    onDragStop = (ev, id) => {
        console.log('on drag stop', ev, id);
        ev.dataTransfer.setData("id", id);
    }
    eventDragStart = (ev, id) => {
        console.log('drag start', ev, id);
        // ev.dataTransfer.setData("id", id);
    }

    eventDragResize = (ev, id) => {
        console.log('drag start', ev, id);
        // ev.dataTransfer.setData("id", id);
    }

    eventDragStop = (ev, id) => {
        console.log('drag Stop', ev, id);
        // ev.dataTransfer.setData("id", id);
    }
    render() {
        return (<div >

            <div>
                <div
                    key={1}
                    draggable
                    onDragStart={(e) => this.onDragStart(e, 1)}
                    onDragStop={(e) => this.onDragStop(e, 1)}
                    data-event='{ title: "my event", duration: "02:00" }'
                >
                    Drag Me
                </div>

            </div>
            <div>
                <FullCalendar
                    droppable={true}
                    plugins={[interactionPlugin, 'interaction', 'dayGrid', 'timeGrid', 'list']}
                    header={{
                        left: 'prev,next today myCustomButton',
                        center: 'title',
                        right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay'
                    }}
                    onDragStop={(e) => this.onDragStop(e, 1)}
                    defaultDate={'2017-05-12'}
                    navLinks={true} // can click day/week names to navigate views
                    editable={true}
                    nowIndicator={true}
                    selectable={true}
                    eventSelect={(args) => this.select(args)}
                    select={(args) => this.select(args)}
                    eventLimit={true} // allow "more" link when too many events
                    events={this.state.events}
                    eventClick={(args) => this.click(args)}
                    drop={(args) => this.drop(args)}
                    eventDragStart={(args) => this.eventDragStart(args)}
                    eventDragStop={(args) => this.eventDragStop(args)}
                    eventResize={(args) => this.eventDragResize(args)}
                    eventDrop={(args) => this.drop(args)}
                    eventReceive={(args) => this.eventRecieve(args)}
                />
            </div>
        </div>);
    }

}

const styles = {
    div: {
        margin: 10
    }
};

MyCalendar.propTypes = {
    children: PropTypes.node,
    classes: PropTypes.object.isRequired
};


export default withStyles(styles)(MyCalendar);