diff --git a/ui/effects/use-hover.js b/ui/effects/use-hover.js
index 7a3b1a788..d153556b6 100644
--- a/ui/effects/use-hover.js
+++ b/ui/effects/use-hover.js
@@ -3,18 +3,18 @@ import { useEffect, useState } from 'react';
 export default function useHover(ref) {
   const [isHovering, setIsHovering] = useState(false);
 
-  useEffect(() => {
-    function handleHover() {
-      setIsHovering(!isHovering);
-    }
+  const hoverFunc = () => setIsHovering(true);
+  const unHoverFunc = () => setIsHovering(false);
 
+  useEffect(() => {
     const refElement = ref.current;
     if (refElement) {
-      refElement.addEventListener('mouseenter', handleHover);
-      refElement.addEventListener('mouseleave', handleHover);
+      refElement.addEventListener('mouseenter', hoverFunc);
+      refElement.addEventListener('mouseleave', unHoverFunc);
+
       return () => {
-        refElement.removeEventListener('mouseenter', handleHover);
-        refElement.removeEventListener('mouseleave', handleHover);
+        refElement.removeEventListener('mouseenter', hoverFunc);
+        refElement.removeEventListener('mouseleave', unHoverFunc);
       };
     }
   }, [ref, isHovering]);