Lazy loading images in React

Question

I have an Image component that receives a name for an image, and uses some logic to determine where the assets folder is located.

My Image component looks something like this:

export default function Image({
  basename,
  fallbackBasename,
  onError,
  ...props
}) {
  const imageAssetsBaseUrl =
    path.extname(basename) === 'svg'
      ? '../../../assets/icons'
      : '../../../assets/images';

  const [hasError, setHasError] = useState(false);
  const handleError = (...args) => {
    setHasError(true);
    onError(...args);
  };

  const imageSource = React.lazy(() =>
    import(
      hasError
        ? `${imageAssetsBaseUrl}${fallbackBasename}`
        : `${imageAssetsBaseUrl}${basename}`
    ),
  );

  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <img src={imageSource} onError={handleError} {...props} />
    </React.Suspense>
  );
}

What I expected was to the <div>loading...</div> to be rendered while the image was being lazily loaded, and the image to be correctly rendered once it was loaded.

What actually happens is that nothing gets rendered during the loading stages of the asset, and whenever the load finally happens, I get an error image since the img's source is: [object Object].