diff --git a/components/WidthHandler.js b/components/WidthHandler.js
index 29f9c6f..eb9a7d9 100644
--- a/components/WidthHandler.js
+++ b/components/WidthHandler.js
@@ -34,6 +34,14 @@ 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
@@ -42,9 +50,6 @@ 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}