Resolve "[MIN-194] Display user grouped overlays"

#131

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlayListItem/hooks/useDragAndDrop.ts

 /* eslint-disable no-param-reassign */
 import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
+import { MapOverlay } from '@/types/models';
 
 const ITEM_TYPE = 'card';
 
 type UseDragAndDropProps = {
   index: number;
+  overlay: MapOverlay;
+  groupId: number | null;
   onHover: (dragIndex: number, hoverIndex: number) => void;
-  onDrop: () => void;
+  onDrop: (overlay: MapOverlay, targetGroupId: number | null) => void;
 };
 
 type UseDragAndDropReturn = {
@@ -19,10 +22,12 @@ export const useDragAndDrop = ({
   index,
   onDrop,
   onHover,
+  groupId,
+  overlay,
 }: UseDragAndDropProps): UseDragAndDropReturn => {
   const [{ isDragging }, dragRef] = useDrag({
     type: ITEM_TYPE,
-    item: { index },
+    item: { index, overlay, groupId },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
     }),
@@ -30,7 +35,7 @@ export const useDragAndDrop = ({
 
   const [, dropRef] = useDrop({
     accept: ITEM_TYPE,
-    hover: (item: { index: number }) => {
+    hover: (item: { index: number; groupId: number | null; overlay: MapOverlay }) => {
       const dragIndex = item.index;
       const hoverIndex = index;
 
@@ -38,8 +43,8 @@ export const useDragAndDrop = ({
 
       item.index = hoverIndex;
     },
-    drop() {
-      onDrop();
+    drop(item: { index: number; groupId: number | null; overlay: MapOverlay }) {
+      onDrop(item.overlay, groupId);
     },
   });