dnd.jsx

const DnD = () => {
  const [draging, setDraging] = useState(false)

  const handleDragStart = useCallback(() => {
    setDraging(true)
    // [Record starting point]
  }, [setDraging])

  const handleDragMove = useCallback(() => {
    // [Calc the current position]
  }, [])

  const handleDragComplete = useCallback(() => {
    setDraging(false)
    // [Resize the element]
  }, [setDraging])

  useEffect(() => {
    if(draging) {
      document.addEventListener('mousemove', handleDragMove)
      document.addEventListener('mouseup', handleDragComplete)
    }
    return () => {
      document.removeEventListener('mousemove', handleDragMove)
      document.removeEventListener('mouseup', handleDragComplete)
    }
  }, [draging, handleDragMove, handleDragComplete])

  return <div onMouseDown={handleDragStart} />
}