Marker - popup property error (createDocumentFragment)

[RobJJ]

Hi,
Im mapping over an array and creating Markers to display on my map. I want to create a unique Popup for each Marker so I'm using the popup property that is available on . The popup returned is working correctly on the map, but my terminal is showing an error which im guessing related to a difference in the DOM. Any ideas as to why?

<Marker
              key={location.name}
              longitude={location.longitude}
              latitude={location.latitude}
              popup={createPopUp(location)}
            >
      <Image src={hospitalIcon} alt="hospital-icon" />
</Marker>

const createPopUp = (location) => {
    return new mapboxgl.Popup().setHTML(
      `<h1><b>${location.name}</b></h1><p>Info here</p>`
    );
  };

Im not sure why it's working as intended but still throwing an error ::

• error node_modules/mapbox-gl/dist/mapbox-gl.js (36:502401) @ Popup.setHTML
• error TypeError: Cannot read properties of undefined (reading 'createDocumentFragment')
  at createPopUp (./src/components/map/Map-Component.jsx:53:12)
  at eval (./src/components/map/Map-Component.jsx:151:32)
  at Array.map ()
  at MapComponent (./src/components/map/Map-Component.jsx:147:87)
  null