fix: fixed columns draggables and styles

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -2,7 +2,7 @@
 
 import React, { ReactNode, RefObject } from "react";
 import {
-    closestCorners,
+    closestCenter,
     DndContext,
     DragEndEvent,
     DragOverEvent,
@@ -30,7 +30,12 @@ type Props<TContainer, TItem> = {
     onDragOver: (event: DragOverEvent) => void;
     onDragEnd: (event: DragEndEvent) => void;
     swiperRef: RefObject<SwiperRef | null>;
-    renderContainer: (container: TContainer, children: ReactNode) => ReactNode;
+    renderContainer: (
+        container: TContainer,
+        children: ReactNode,
+        renderDraggable: () => ReactNode
+    ) => ReactNode;
+    renderContainerHeader: (container: TContainer) => ReactNode;
     renderContainerOverlay: (
         container: TContainer,
         children: ReactNode
@@ -56,6 +61,7 @@ const FunnelDnd = <
     onDragEnd,
     swiperRef,
     renderContainer,
+    renderContainerHeader,
     renderContainerOverlay,
     renderItem,
     renderItemOverlay,
@@ -81,16 +87,18 @@ const FunnelDnd = <
                         key={containerId}
                         id={containerId}
                         disabled={disabledColumns}
-                        renderItem={() =>
+                        renderItem={renderDraggable =>
                             renderContainer(
                                 container,
                                 <FunnelColumn
                                     id={containerId}
                                     items={containerItems}
                                     renderItem={renderItem}
-                                />
+                                />,
+                                renderDraggable!
                             )
                         }
+                        renderDraggable={() => renderContainerHeader(container)}
                     />
                 </SwiperSlide>
             );
@@ -142,7 +150,7 @@ const FunnelDnd = <
     return (
         <DndContext
             sensors={sensors}
-            collisionDetection={closestCorners}
+            collisionDetection={closestCenter}
             onDragStart={onDragStart}
             onDragOver={onDragOver}
             onDragEnd={onDragEnd}>