From 957d7210e604a822420e61d05d74efe7016d8ddc Mon Sep 17 00:00:00 2001
From: Elizabeth Stranack <elstranack@expediagroup.com>
Date: Tue, 25 Jan 2022 12:40:26 -0800
Subject: [PATCH] Adding dependencies the hook

Signed-off-by: Elizabeth Stranack <elstranack@expediagroup.com>
---
 .../core-components/src/components/ProgressBars/Gauge.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 297e4961ce..11f977b387 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -132,11 +132,11 @@ export function Gauge(props: GaugeProps) {
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
 
   const [isHovering, setIsHovering] = useState(false);
-  const handleMouseOver = () => setIsHovering(true);
-  const handleMouseOut = () => setIsHovering(false);
 
   useEffect(() => {
     const node = hoverRef;
+    const handleMouseOver = () => setIsHovering(true);
+    const handleMouseOut = () => setIsHovering(false);
     if (node && description) {
       node.addEventListener('mouseenter', handleMouseOver);
       node.addEventListener('mouseleave', handleMouseOut);
@@ -149,7 +149,7 @@ export function Gauge(props: GaugeProps) {
     return () => {
       setIsHovering(false);
     };
-  });
+  }, [description, hoverRef]);
 
   return (
     <div ref={setHoverRef} className={classes.root}>