I am using Next.js. I am using the latest app routing (i.e. app/myMapPage/page.tsx). See below for other specifics:

{
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@prisma/client": "5.15.0",
    "@types/node": "^20.10.5",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "azure-maps-control": "^3.1.2",
    "azure-maps-drawing-tools": "^1.0.3",
    "bcrypt-ts": "^5.0.0",
    "drizzle-orm": "^0.29.2",
    "geist": "^1.2.0",
    "next": "^14.0.4",
    "next-auth": "5.0.0-beta.4",
    "postgres": "^3.4.3",
    "react": "^18.2.0",
    "react-azure-maps": "^1.0.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "eslint": "8.56.0",
    "eslint-config-next": "^14.0.4",
    "postcss": "^8.4.32",
    "prisma": "^5.15.0",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.3.3"
  }
}

Inside page.tsx I have the following:

import React from 'react'
import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
import {AuthenticationType} from 'azure-maps-control'

const option: IAzureMapOptions = {
    authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: '' // Your subscription key
    },
}

const DefaultMap: React.FC = () => (
    <div style={{height: '300px'}}>
        <AzureMapsProvider>
            <AzureMap options={option}>
            </AzureMap>
        </AzureMapsProvider>
    </div>
)
export default DefaultMap

Which frankly is code taken stright off the MS website. I have also tried many other methods but to no avail. I have inserted a working and tested Subscription Key.

Does anyone have an indication why this isn’t working as expected?