Image fails in Next.js app (Element type is invalid: expected a string)

[sunech]

I am struggling getting Image to work with my Next.js application.

To narrow it down, I have tried to port over the example from the official documentation:

import { useState } from 'react';
import MapGL, { Source, Layer, Image } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const MAPBOX_ACCESS_TOKEN = 'redacted';
export default function MapDetails(props) {
    const [viewport, setViewport] = useState({
        latitude: 37.753574,
        longitude: -122.447303,
        zoom: 13
      });
      
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [-122.45, 37.75]
            }
          }
        ]
      };
      
      const imageURL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png';
    return (
        <MapGL
        style={{ width: '100%', height: '400px' }}
        mapStyle='mapbox://styles/mapbox/light-v9'
        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
        onViewportChange={setViewport}
        {...viewport}
      >
        <Source id='point' type='geojson' data={data} />
        <Image id='my-image' image={imageURL} />
        <Layer
          id='image-layer'
          type='symbol'
          source='point'
          layout={{
            'icon-image': 'my-image',
            'icon-size': 0.25
          }}
        />
      </MapGL>
    );
}

This is giving me the error below and referring to line 37, where I call Image:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MapDetails`.

If I remove the Image tag, the map loads just fine. Changing/removing the parameters on the Image tag have no influence.

If I load the same images directly via map.loadImage / map.addImage they are loaded just fine, but my issue then is that they are not finished loading when Source/Layer is rendered, and hence generates a warning in the console.

Does anyone have any input? I am relatively new to both Next.js, React and the react-map-gl wrapper, so I am hoping that it is something really basic that I am missing in relation to how Next.js renders react-map-gl.

[Pessimistress]

There is no export called Image.

[sunech]

This feels so stupid. Was not until now, I realized that https://urbica.github.io/react-map-gl/ was for a completely different package (@urbica/react-map-gl), so I have been working off the wrong docs/examples... Doh! But thank you very much for pointing me in the right direction :-)