fix: refactor link event listeners

components/TempDesignSystem/Link/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname } from "next/navigation"
-import { useEffect } from "react"
+import { useCallback, useEffect } from "react"
 
 import { trackClick } from "@/utils/tracking"
 
@@ -36,19 +36,23 @@ export default function Link({
     variant,
   })
 
-  useEffect(() => {
+  const trackClickById = useCallback(() => {
     if (trackingId) {
-      document
+      trackClick(trackingId)
-        .getElementById(trackingId)
-        ?.addEventListener("click", () => trackClick(trackingId))
-      return () => {
-        document
-          .getElementById(trackingId)
-          ?.removeEventListener("click", () => trackClick(trackingId))
-      }
     }
   }, [trackingId])
 
+  useEffect(() => {
+    if (trackingId) {
+      const linkComponent = document.getElementById(trackingId)
+
+      linkComponent?.addEventListener("click", trackClickById)
+      return () => {
+        linkComponent?.removeEventListener("click", trackClickById)
+      }
+    }
+  }, [trackClickById, trackingId])
+
   return (
     <NextLink
       scroll={scroll}