Standard events onDragEnter/onDragOver/onDragLeave can't work when using react-dnd

[alexya]

Describe the bug
In our project, we are using react-dnd to deal with the drag and drop, it can work fine.
But now we are building another component that will use 3rd party package/lib, and so far we can't use react-dnd directly. So, we try to use the HTML drag and drop directly but it seems that it can't work when using both techs.
I am not sure if when using HTML drag and drop, we need to ignore its events in the react-dnd useDrag or useDrop, or add some settings, etc.

Reproduction

CodeSandbox Live Reproduction

Steps to reproduce the behavior:

1. Open the code sandbox sample via the above link.
2. Play the Chess game, drag and drop the Knight, it works fine.
3. But, when you try to drag the tree-view item below, it can't work.
4. Open the index.js file, no matter I put the <TreeViewPane /> inside or outside the <DndProvider>, it can't work.
5. Open the index.js file, delete the code line <Example />, and try again. The items in the Tree-View can be draggable, all the events such as onDragEnter, onDragOver, can work fine.
6. I added a simple HTML element <ul /> and <li /> instead of a Treeview control to repro the issue, the same as above.

Expected behavior
because in our real environment, we have to use both techs/ways to implement drag and drop, using HTML drag-and-drop and react-dnd at the same time, I want to make them work fine together and no conflict.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [macOS Big Sur 11.6, windows 10 1809 17763.2300]
• Browser [chrome Version 96.0.4664.55 (Official Build) (x86_64)]
• Version [react-dnd@^10.0.2, react-dnd-html5-backend@^10.0.2]

Additional context

• when trying to drag an item in the tree-view, the onDragStart event can be triggered(from the console log), all the events binding to the drop target such as onDragOver, onDragLeave, and onDrop can't be triggered.
• I upgraded the version to react-dnd@^14.0.4, the issue still existed.

[alexya]

By referring to issue #3099, and the PR fix: Drag and drop images in editor, conflict with sidebar react-dnd, I find a way to resolve the conflict.
In a short, specify a root element for the . I am not sure why the doc of the react-dnd doesn't tell it and there is no code sample, it is a very important property.
Updated my code sandbox (link) too.