drake.on drop event not occurs react dragulla

[ArchanaSharma95]

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.

[ArchanaSharma95]

any solution??