move onMouseUp to component handler

components/WidthHandler.js

@@ -34,14 +34,6 @@ export default function WidthHandler(props) {
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [innerRef, onChange])
 
-  React.useEffect(() => {
-    function handleMouseUp() {
-      startX.current = null
-    }
-    window.addEventListener('mouseup', handleMouseUp)
-    return () => window.removeEventListener('mouseup', handleMouseUp)
-  }, [])
-
   return (
     // eslint-disable-next-line
     <div
@@ -50,6 +42,9 @@ export default function WidthHandler(props) {
         startX.current = e.pageX
         startWidth.current = innerRef.current.clientWidth
       }}
+      onMouseUp={() => {
+        startX.current = null
+      }}
       role="separator"
       aria-orientation="vertical"
       aria-valuemin={minWidth}