StatefulTable Drag and Drop not Working

[arcticpete]

Describe the bug
The drag and drop feature does not work in current React 18 because of a deprecated library react-beautiful-dnd. It looks like this could be replaced with a working [@hello-pangea/dnd](https://stackoverflow.com/questions/75124430/react-beautiful-dnd-warning-defaultprops-will-be-removed)
To Reproduce
Steps to reproduce the behavior:

1. use the example located at https://developer.bigcommerce.com/big-design/statefulTable
2. attempt to drag and drop
3. open warnings console
4. See error

Expected behavior
drag and drop should work

Screenshots

Desktop (please complete the following information, if applicable):

• OS: Mac os
• Browser Chrome
• React 18

[chanceaclark]

Hey @arcticpete,

We will eventually move over to https://github.com/atlassian/pragmatic-drag-and-drop as per Atlassians deprecation notes: atlassian/react-beautiful-dnd#2672

In regards to these warnings you are receiving, I have been unable to reproduce it locally or on the documentation site. Would you mind providing a CodeSandbox reproduction so we can look into it more?

[david-vloedman]

Hey @arcticpete ,

I just wanted to comment that I also ran into this issue and was able resolve it by removing react strict mode.

The fix was found in the react-beautiful-dnd issues: atlassian/react-beautiful-dnd#2407

Cheers,
David

[pvaladez]

Hey @chanceaclark,

Here's a codesandbox reproducing the issue when <React.StrictMode> is used. The issue can also fixed by commenting out the strict mode elements.

https://codesandbox.io/p/devbox/bigdesign-draggable-table-issue-22kvds

It looks like people on the linked issue above were able to use hello-pangea/dnd as a direct drop-in replacement for react-beautiful-dnd... it's apparently a maintained fork.