I have an image that I take from an API endpoint. For a reason, I’m importing the image component inside a Suspense with a fallback. The problem is that every time a useState or a useEffect is executed, the fallback of the Suspense is shown. Is there any way to prevent the Suspense fallback from being shown after the first render or when the image is cached?

 export async function AvatarIcon({ id }: { id: string }) {
  const avatarIcon = await getAvatarIcon(id)

  return (
    <div className="">
      <Image
        src={`data:image/png;base64, ${avatarIcon}`}
        height={40}
        width={40}
        className="relative z-0 h-full w-16"
        alt="Avatar Icon"
      ></Image>
    </div>
  )
}

The other com where i use suspense

 <div>
        <Suspense fallback={<div></div>}>
        <AvatarIcon id={user.id} />
        </Suspense>
      </div>