ImageWithFallback: change image when src change

src/components/ImageWithFallback/ImageWithFallback.tsx

@@ -46,7 +46,7 @@ const ImageWithFallback = ({
         {
           rootMargin: "50px", // Start loading 50px before the image comes into view
           threshold: 0.1,
-        }
+        },
       );
 
       if (imageRef.current) {
@@ -70,6 +70,13 @@ const ImageWithFallback = ({
     setHasError(false);
   }, []);
 
+  // Update imgSrc when src prop changes
+  useEffect(() => {
+    setImgSrc(src || fallbackSrc);
+    setIsLoading(true);
+    setHasError(false);
+  }, [src, fallbackSrc]);
+
   // Combine custom style with borderRadius if provided
   const combinedStyle = {
     ...style,
@@ -142,7 +149,6 @@ const ImageWithFallback = ({
           transition: "opacity 0.3s ease-in-out",
           objectFit: "cover",
           ...combinedStyle,
-
         }}
         alt={alt || ""}
         width={width}