fix(use-image): use useSafeLayoutEffect instead

Author: wingkwong

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

@@ -6,6 +6,7 @@ import type {ImgHTMLAttributes, SyntheticEvent} from "react";
 
 import {useRef, useState, useEffect, MutableRefObject} from "react";
 import {useIsHydrated} from "@nextui-org/react-utils";
+import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 
 type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
@@ -95,7 +96,7 @@ export function useImage(props: UseImageProps = {}) {
     }
   };
 
-  useEffect(() => {
+  useSafeLayoutEffect(() => {
     if (isHydrated) {
       setStatus(setImageAndGetInitialStatus(props, imageRef));
     }