React Drag and Drop Hook

Tell us what’s happening:
Hi there! I’m still relatively new to React. As an exercise I wrote a hook that makes components draggable. I’m unsure if there’s some bad practice I’m doing here. So any feedback would be very welcome.
The idea is to create a reference, give that to the top div of a component and then set the translate in the style.
Here is a codepen link: https://codepen.io/wutzig/pen/rNaPWaa
Your code so far

export default function useDraggable(){
  const divRef = React.useRef()
  const [dragPoint, setDragPoint] = React.useState([0,0])  
  React.useEffect( () => {
    divRef.current.style.transform = 'translate(' + dragPoint[0] + 'px,' + dragPoint[1] + 'px)'
  }, [dragPoint])
  React.useEffect( () => {
    const corner = document.createElement('div')
    corner.classList.add('Drag')
    let origCoord = null
    let isDrag = false;
    corner.onmousedown = e => {
      isDrag = true;
      if(!origCoord) origCoord = [e.clientX, e.clientY]
    }
    window.onmousemove = e => {
      if(isDrag){
        setDragPoint([e.clientX - origCoord[0], e.clientY - origCoord[1]])
      }
    }
    window.onmouseup = () => isDrag = false         
    divRef.current.appendChild(corner)
  }, [])
  return divRef
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.