drake.on drop event not occurs react dragulla

Question

I am working on react js app and used react-dragula package for drag and drop. I am using dragula container inside child component, but the drop event not occurs. I have tried every possible way but the drop event not occurs. I want to reorder my list on drag and drop.

This is my code.

import React, { Fragment } from 'react';
import { Tabs, Tab, Card } from 'react-bootstrap';
import Dragula from 'react-dragula';
import { AppCard } from '../../../../../Components/AppCard'

class App extends React.Component {
    drake = null;
    dragullaContainers = [];

    componentDidMount() {
        this.drake = Dragula(this.dragullaContainers, {
            isContainer: function (el) {
                if (el.id === 'social-container') {
                    return true;
                }
                return false;
            },
            moves: function (el, source, handle, sibling) {
                if (handle.id === "socialSortBtn") {
                    return true;
                }
                return false;
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },

        });
        this.drake.on('drop', (el, target) => {
            // this event not occurs
            console.log('drop', el, target)
        });
        this.drake.on('drag', (el, source) => {
            console.log('drag', el)
        })
    }

    // main function
    render() {
        const { data } = this.props;
        const dragulaDecoratorRef = (componentBackingInstance) => {
            if (componentBackingInstance) {
                this.dragullaContainers.push(componentBackingInstance)
            }
        };
        return (
            <Fragment>
                {data ?
                    <Tabs variant="pills" className="btn-group border rounded"  defaultActiveKey="content" id="tools-header">
                        <Tab eventKey="content" title="Content" tabClassName="btn shadow-none">
                            <AppCard>
                                <Card.Body>
                                    <div>
                                        <ul id='social-container' ref={dragulaDecoratorRef}>
                                            {data.active_social_icons && data.active_social_icons.length > 0 && data.active_social_icons.map((activeIcon, index) => (
                                                <li key={index} data-index={index} className="d-flex mb-30">
                                                    <div className="">
                                                        <div className="mr-2">
                                                            <button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
                                                            </button>
                                                        </div>
                                                        <div className="d-flex mb-30">List item</div>
                                                    </div>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </Card.Body>
                            </AppCard>
                        </Tab>
                        <Tab eventKey="style" title="Style">
                            tab2 content
                        </Tab>
                    </Tabs>
                :
                null
            }
            </Fragment>
        )
    }
}

export default App;

Please suggest why drop event is not occuring? I want to update list item position via drag and drop.