Fix drag and drop for options for custom select and radio options

This regression was introduced long ago when we switched to react 18.
More details here
https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4
[MAILPOET-6054]

mailpoet/assets/js/src/form-editor/blocks/custom-radio/settings-preview.jsx

@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Dashicon } from '@wordpress/components';
 import { partial } from 'lodash';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable } from 'react-beautiful-dnd';
+import { StrictModeDroppable as Droppable } from 'form-editor/utils/strict-mode-droppable';
 
 function PreviewItem({ value, remove, onUpdate, onCheck, index }) {
   return (

mailpoet/assets/js/src/form-editor/utils/strict-mode-droppable.tsx

@@ -0,0 +1,21 @@
+// react-beautiful-dnd does not support React StrictMode this snippet fixes the issue
+// StrictModeDroppable.tsx
+// Credits to https://github.com/GiovanniACamacho and https://github.com/Meligy for the TypeScript version
+// Original post: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
+import { useEffect, useState } from '@wordpress/element';
+import { Droppable, DroppableProps } from 'react-beautiful-dnd';
+
+export function StrictModeDroppable({ children, ...props }: DroppableProps) {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return <Droppable {...props}>{children}</Droppable>;
+}