NextJs image went in infinite loop with error: "url" parameter is valid but upstream response is invalid

I am using next/image component with next js ^12.2.3-canary.17 version for my project now issue what i am facing here with this image component is some images were missing from the source directory itself.For this reason it returns infinite error logs as below image:

I want to replace the current image URL with another URL that indicates the absence of an image. To prevent an infinite loop, I have found a solution where I set the onerror property to null and replace the src attribute with a fallback image, like this:

but it didn't help.

PS: I've added valid domains in my next.config.js error is not relates to this.

Can anyone assist? I would appreciate any suggestions.

I handled it like this:

const [imageError, setImageError] = useState(new Map<string, boolean>());

function handleImageError(itemId:string) {
    setImageError(imageError.set(itemId, true));
  }

return(
                        <Image 
                        height={301}
                        width={226}
                        src={item && !imageError.get(item.id) && item.image `${process.env.API_URL}/${item.image}`}
                        onError={() => {
                          handleImageError(item.id);
                        }} />
)

Not sure if it's the good way, thought