[BUG] - [Avatar] Double fetch with custom ImgComponent

[soranoo]

NextUI Version

2.4.8

Describe the bug

'use client';

import NextImage from 'next/image';
import { Avatar } from '@nextui-org/react';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Avatar
        src="<image_1>"
        ImgComponent={NextImage}
        imgProps={{
          width: 500,
          height: 500,
          src: "<image_2>",
        }}
      />
      <p>refresh the page and see the network tab.</p>
      <p>Now: both image will be loaded</p>
      <p>Expected: only the one image should be loaded</p>
    </main>
  );
}

Both images 1 and 2 will be fetched when using custom ImgComponent. In my situation, I set an image in the image_1 position and image 1 got fetched 2 times in a row. (for demo I put two different images)

Your Example Website or App

https://stackblitz.com/edit/nextui-issue-1

Steps to Reproduce the Bug or Issue

1. Wait until the dep downloaded
2. Open the browser console
3. Refresh the page and see the console network tab

Expected behavior

only the one image should be fetched

Screenshots or Videos

No response

Operating System Version

Windows 11

Browser

Chrome