Use effect for hint scroll listener

Author: ericgio

src/components/Hint/Hint.tsx

@@ -39,14 +39,23 @@ function copyStyles(inputNode: HTMLInputElement, hintNode: HTMLInputElement) {
 
 export const useHint = () => {
   const { hintText, inputNode } = useTypeaheadContext();
-  
+
   const hintRef = useRef<HTMLInputElement | null>(null);
 
-  // scroll hint input when the text input is scrolling
-  inputNode?.addEventListener("scroll", () => {
-    hintRef.current!.scrollLeft = inputNode?.scrollLeft
-  })
-  
+  useEffect(() => {
+    // Scroll hint input when the text input is scrolling.
+    const handleInputScroll = () => {
+      if (hintRef.current && inputNode) {
+        hintRef.current.scrollLeft = inputNode.scrollLeft;
+      }
+    };
+
+    inputNode?.addEventListener('scroll', handleInputScroll);
+    return () => {
+      inputNode?.removeEventListener('scroll', handleInputScroll);
+    };
+  }, [inputNode]);
+
   useEffect(() => {
     if (inputNode && hintRef.current) {
       copyStyles(inputNode, hintRef.current);