Azure Maps - AzureMapHtmlMarker - Issue with markerContent

[aron89682]

Summary

I am receiving the following error: Error: Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.

I am working with Azure Maps and attempting to add an HTML Marker (Pin) to the map.

The error seems to be related to markerContent:

function LocationMarker() {
    const rendId = Math.random();
    return (
        <AzureMapHtmlMarker
            key={rendId}
            markerContent={<div className="pulseIcon"></div>}
            options={{ position: [lon, lat] }}
        />
    )
}

I tried these suggestions but couldn't get it to work: https://github.com/vercel/next.js/discussions/58533#discussioncomment-7764791 and https://github.com/vercel/next.js/discussions/58305#discussioncomment-7717044

Has anyone been able to get this to work with Azure Maps or maybe have another work around?

Additional information

No response

Example

No response

[aron89682]

closing