I'm using **jQuery nestable plugin** <https://dbushell.com/Nestable/> in my React App. I know that there will be problems when we use jQuery in React.

jQuery nestable solves my business needs, can't find the exact requirements in react drag/nestable components. So I have used this jQuery plugin.

The real problem is : while dragging an element by using this jQuery plugin, it clones the DOM, apart from this everything is in react.

Initialized the jQuery nestable functionality like below:

```
componentDidMount() {
    this.$node = $(this.nestable); // this.nestable is a ref

    this.$node.nestable({
        group: 1,
        maxDepth: 4,
        expandBtnHTML:"",
        collapseBtnHTML:""
    });
}

```

the above code will let me drag the group2 among all other DOM elements like below image:

[![enter image description here](https://i.stack.imgur.com/VtKtG.png)](https://i.stack.imgur.com/VtKtG.png)

group2 is the draggable element here.

after dragged, I can see that group2 apperaed twice and I guess jQuery plugin clones the dragged element like below:

[![enter image description here](https://i.stack.imgur.com/D8pWn.png)](https://i.stack.imgur.com/D8pWn.png)

and in developer tools :
[![enter image description here](https://i.stack.imgur.com/rVLpW.png)](https://i.stack.imgur.com/rVLpW.png)

But In react developer tools, I can see that DOM is correct.
[![enter image description here](https://i.stack.imgur.com/cybIv.png)](https://i.stack.imgur.com/cybIv.png)

I don't know, how to rectify this problem. I'm unable to update the full code here because the code base is large.

In react developer tools, I can see that DOM is correct, and in native DOM is not !! 

Is it possible to replace native DOM by virtual DOM after setState or is it possible for react to trace DOM handled by jQuery ?

I accept @ Patrick Evans comments, I'm looking for a solution here or suitable react based component like jQuery nestable.

Any help on this will be helpful.