How to implement React-Dnd with Carbon Charts inside draggable components in a remix app?

[fahadahmed]

Does anyone have any experience in implementing React-DND for components containing carbon charts within a Remix app?

Currently when I am trying to implement a React Drag and Drop feature using React-dnd library to allow creation of reports by dragging and dropping pre-built cards/tiles which include charts from the carbon library.

The issue I am facing is that the node reference being used by the useDrag hook is using the ref for the whole document page instead of just the DOM element itself when including the @carbon charts like Donut. (See screenshots for details)

Drag and Drop works fine without the @carbon charts

the ref when trying to drag the component including the chart is taking the reference of the whole canvas instead of the component.

[fahadahmed]

When I use any other charting library like nivo charts inside the same implementation, I am able to get the required functionality without issues.

[fahadahmed]

Uploaded a video on the Slack channel chat specifically for this issue.