fix(explore): fix undefined error when using dnd (#16020)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import {
   useDrag,
   useDrop,
@@ -24,7 +24,6 @@ import {
   DragSourceMonitor,
 } from 'react-dnd';
 import { DragContainer } from 'src/explore/components/controls/OptionControls';
-import { DndItemType } from 'src/explore/components/DndItemType';
 import {
   OptionProps,
   OptionItemInterface,
@@ -33,7 +32,7 @@ import Option from './Option';
 
 export default function OptionWrapper(
   props: OptionProps & {
-    type: DndItemType;
+    type: string;
     onShiftOptions: (dragIndex: number, hoverIndex: number) => void;
   },
 ) {
@@ -50,10 +49,13 @@ export default function OptionWrapper(
   } = props;
   const ref = useRef<HTMLDivElement>(null);
 
-  const item: OptionItemInterface = {
-    dragIndex: index,
-    type,
-  };
+  const item: OptionItemInterface = useMemo(
+    () => ({
+      dragIndex: index,
+      type,
+    }),
+    [index, type],
+  );
   const [, drag] = useDrag({
     item,
     collect: (monitor: DragSourceMonitor) => ({