fix(use-image): set status after hydrated

Author: wingkwong

.changeset/fair-pigs-tap.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-image": patch
+---
+
+set status after hydrated

packages/hooks/use-image/src/index.ts

@@ -71,9 +71,7 @@ export function useImage(props: UseImageProps = {}) {
 
   const imageRef = useRef<HTMLImageElement | null>(isHydrated ? new Image() : null);
 
-  const [status, setStatus] = useState<Status>(() =>
-    isHydrated ? setImageAndGetInitialStatus(props, imageRef) : "pending",
-  );
+  const [status, setStatus] = useState<Status>("pending");
 
   useEffect(() => {
     if (!imageRef.current) return;
@@ -97,6 +95,12 @@ export function useImage(props: UseImageProps = {}) {
     }
   };
 
+  useEffect(() => {
+    if (isHydrated) {
+      setStatus(setImageAndGetInitialStatus(props, imageRef));
+    }
+  }, [isHydrated]);
+
   /**
    * If user opts out of the fallback/placeholder
    * logic, let's just return 'loaded'