working on DND kit

src/components/utils/draggable.js

@@ -1,18 +1,23 @@
 import React from "react"
 import {useDraggable} from "@dnd-kit/core"
-
+import { CSS } from "@dnd-kit/utilities"
 
 function Draggable(props) {
     const {attributes, listeners, setNodeRef, transform} = useDraggable({
-      id: 'draggable',
+      id: props.id,
+      data: {title: props.children}
     })
     const style = transform ? {
-      transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      transform: CSS.Translate.toString(transform),
     } : undefined
   
     
     return (
-      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} ref={setNodeRef} style={style} {...listeners} {...attributes}>
+      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
+			ref={setNodeRef} 
+			style={style} 
+			{...listeners} 
+			{...attributes}>
         {props.children}
       </button>
     )