Fix multiple dnd backends error

[MAILPOET-2592]

assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx

@@ -7,8 +7,8 @@ import React, {
 import PropTypes from 'prop-types';
 import { Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
+import { useDrag, useDrop } from 'react-dnd';
+import DndProvider from '../dnd_provider.jsx';
 
 const PreviewItem = ({
   value,
@@ -153,7 +153,7 @@ const Preview = ({
   };
 
   return (
-    <DndProvider backend={Backend}>
+    <DndProvider>
       {valuesWhileMoved.map((value, index) => (
         <PreviewItem
           key={value.id}

assets/js/src/form_editor/blocks/dnd_provider.jsx

@@ -0,0 +1,22 @@
+import React, { useRef } from 'react';
+import { DndProvider as ReactDndProvider, createDndContext } from 'react-dnd';
+import Backend from 'react-dnd-html5-backend';
+import PropTypes from 'prop-types';
+
+const DndProvider = ({ children }) => {
+  const manager = useRef(createDndContext(Backend));
+  return (
+    <ReactDndProvider manager={manager.current.dragDropManager}>
+      {children}
+    </ReactDndProvider>
+  );
+};
+
+DndProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default DndProvider;

assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx

@@ -7,8 +7,8 @@ import React, {
 import PropTypes from 'prop-types';
 import { CheckboxControl, Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
+import { useDrag, useDrop } from 'react-dnd';
+import DndProvider from '../dnd_provider.jsx';
 
 const PreviewItem = ({
   segment,
@@ -140,7 +140,7 @@ const Preview = ({
   };
 
   return (
-    <DndProvider backend={Backend}>
+    <DndProvider>
       {segmentsWhileMoved.map((segment, index) => (
         <PreviewItem
           key={segment.id}