I have this original code at the top of a component:

const [activePreview, setActivePreview] = useState(0);

then this is used for an image later on:

<Image
  src={product?.imgs?.previews?.[activePreview]}
  alt="products-details"
  width={400}
  height={400}
/>

When I preview that page, I get this error:

<Image
^
  src={product?.imgs?.previews?.[activePreview]}
  alt="products-details"
  width={400}

An empty string ("") was passed to the src attribute. To fix this, either do not render the element at all or pass null to src instead of an empty string.

So I tried avoiding the empty string at the top of the component:

  const [activePreview, setActivePreview] = useState(0);
  let imgSrc = product?.imgs?.previews?.[activePreview]; 
  if (imgSrc == "") imgSrc = null;

And then using the empty string proof imgSrc in the image:

<Image
  src={imgSrc}
  alt="products-details"
  width={400}
  height={400}

Yet I still get the exact same error when the an attempt is made to render the image.

I have about 6 months Nextjs now, but I'm a very experience dev overall, and have never had anything like this crop up in an app before. I mean with if (imgSrc == "") imgSrc = null, how can it have a value of empty string when used for src? No other code mofifies this variable between when I ensure it's not empty.