fix: better hover use-effect

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(() => {
+  const hoverFunc = () => setIsHovering(true);
-    function handleHover() {
+  const unHoverFunc = () => setIsHovering(false);
-      setIsHovering(!isHovering);
-    }
 
+  useEffect(() => {
     const refElement = ref.current;
     if (refElement) {
-      refElement.addEventListener('mouseenter', handleHover);
+      refElement.addEventListener('mouseenter', hoverFunc);
-      refElement.addEventListener('mouseleave', handleHover);
+      refElement.addEventListener('mouseleave', unHoverFunc);
+
       return () => {
-        refElement.removeEventListener('mouseenter', handleHover);
+        refElement.removeEventListener('mouseenter', hoverFunc);
-        refElement.removeEventListener('mouseleave', handleHover);
+        refElement.removeEventListener('mouseleave', unHoverFunc);
       };
     }
   }, [ref, isHovering]);