Reactjs bridge of dragula: It is only getting applied onto parent container and not on child elements (unlike angular, dragula directive can be used in child elements)

[Minu-DEVELOPER]

dragula library for reactjs is re-aligning elements, it is not exchanging element position for me.

For Example:

Parent Container has ref={this.dragulaDecorator}
Element A
Fixed-Non draggable Element B
Element C
Line break
Element D
Element E
Fixed-Non draggable Element F
Element G
Element H

If I have dragged Element D to Element A
New list formed is

Parent Container has ref={this.dragulaDecorator}
Element A
Element D
Fixed-Non draggable Element B
Element C
Line break
Element E
Fixed-Non draggable Element F
Element G
Element H

wherein what I expect is replacement or exchange of position

Parent Container has ref={this.dragulaDecorator}
Element D
Fixed-Non draggable Element B
Element C
Line break
Element A
Element E
Fixed-Non draggable Element F
Element G
Element H

Dragula options set:
{
isContainer: function (el) {
return false; // only elements in drake.containers will be taken into account
},
moves: function (el, source, handle, sibling) {
if (el.classList.contains("axleConfigBar")) {
return false;
}
return true; // elements are always draggable by default
},
accepts: function (el, target, source, sibling) {
return true; // elements can be dropped in any of the containers by default
},
invalid: function (el, handle) {
return false; // don't prevent any drags from initiating by default
},
direction: "vertical", // Y axis is considered when determining where an element would be dropped
copy: false, // elements are moved by default, not copied
copySortSource: false, // elements in copy-source containers can be reordered
revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true
removeOnSpill: false, // spilling will .remove the element, if this is true
mirrorContainer: document.body, // set the element that gets mirror elements appended
ignoreInputTextSelection: true, // allows users to select input text, see details below
slideFactorX: 0, // allows users to select the amount of movement on the X axis before it is considered a drag instead of a click
slideFactorY: 0,
};

Only problem I could understand is I'm not getting destination position in drake.on('drop') to realign-re-position my container. (unlike angular)
And in reactjs, it is only getting applied on parent container not to child elements.

Any help or suggestion to exchange element position using dragula?
[contrib]: https://github.com/bevacqua/dragula/blob/master/.github/contributing.markdown
[slack]: https://dragula.slack.com