Drag React Component with Handle

draggable.js

import React, { useState, useCallback } from 'react';

const Draggable = ({
  children
}) => {
  const [isDrag, setIsDrag] = useState(false);
  const onDragEndHandler = useCallback((e) => {
    setIsDrag(false);
  }, []);
  const onMouseDownHandler = useCallback((e) => {
    setIsDrag(true);
  }, []);
  const onMouseUpHandler = useCallback((e) => {
    setIsDrag(false);
  }, []);
  return children({
    isDrag,
    onDragEndHandler,
    onMouseDownHandler,
    onMouseUpHandler
  });
}

export default Draggable;

example.js

import React from 'react';
import Draggable from 'draggable.js';

const Component = () => {
  return (
    <Draggable>
    {({isDrag, onDragEndHandler, onMouseDownHandler, onMouseUpHandler})=>(
      <div className="its a parent"
        draggable={isDrag}
        onDragEnd={onDragEndHandler}>
        <div className="its a handle"
          onMouseDown={onMouseDownHandler}
          onMouseUp={onMouseUpHandler}>Drag Me!</div>
        <div className="its a content">Lorem ipsum dolor sit amet</div>
      </div>
    )}
    </Draggable>
  )
}