fix: fixed logo refetch on re-render (#2978)

Author: chesterkmr

apps/kyb-app/src/components/layouts/AppShell/Logo.tsx

@@ -1,3 +1,4 @@
+import { useRefValue } from '@/hooks/useRefValue';
 import { useEffect } from 'react';
 
 interface Props {
@@ -16,14 +17,16 @@ const prefetchImage = (url: string) =>
 const fallback = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
 
 export const Logo = ({ logoSrc, appName, onLoad }: Props) => {
+  const onLoadRef = useRefValue(onLoad);
+
   useEffect(() => {
     if (!onLoad) {
       return;
     }
 
     // Using race here in case if image is corrupted or load takes to long we don't want to lock stepper breadcrumbs forever.
-    Promise.race([prefetchImage(logoSrc), fallback(3000)]).then(onLoad);
-  }, [logoSrc, onLoad]);
+    Promise.race([prefetchImage(logoSrc), fallback(3000)]).then(onLoadRef.current);
+  }, [logoSrc, onLoadRef]);
 
   return <img src={logoSrc} alt={appName} className="max-h-[80px] max-w-[200px] object-cover" />;
 };