TypeError: Cannot read properties of undefined (reading 'getCurrentStack')

Hi everyone,

have anyone encountered this error? I created a react control which displays an azure map, its working fine displaying only just the map and pins. But if I included a popup for the details of my pins the error occurred. Here is my code.

`
import * as React from 'react';
import { useState, useEffect } from 'react';
import { IInputs } from '../generated/ManifestTypes';
import { Stack } from '@fluentui/react/lib/Stack';
import { AzureMap, AzureMapsProvider, IAzureMapOptions, AzureMapDataSourceProvider, AzureMapLayerProvider, AzureMapFeature, AzureMapPopup } from 'react-azure-maps';
import { AuthenticationType, data, MapMouseEvent} from 'azure-maps-control';
import 'azure-maps-control/dist/atlas.min.css';

export interface AzureMapsGridProp {
mapContext: ComponentFramework.Context;
items?: any[];
}

const baseMapOptions: IAzureMapOptions = {
zoom: 10,
center: [0, 0],
language: 'en-US',
view: 'Auto',
}

const renderPoint = (): data.Position => {
const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
return new data.Position(randomLongitude, randomLatitude);
};

export const AzureMapsGrid: React.FunctionComponent = (props) => {
const contextWebApi: any = props.mapContext.webAPI;
const [azureMapOptions, setAzureMapOptions] = useState(baseMapOptions);
const [showMap, setShowMap] = useState(false);
const [coords1, setCoords1] = useState(renderPoint);
const [isVisible, setIsVisible] = useState(false);

//Checking if Azure Map control is supported on user's browser
useEffect(() => {
CreateAzureMapToken(props.mapContext);
},[]);

useEffect(() => {
if (azureMapOptions.authOptions){
setShowMap(true);
}
}, [azureMapOptions.authOptions]);

//Custom API Call for Creating Azure Map Token
const CreateAzureMapToken = async(context: ComponentFramework.Context) => {

//initialize Create Azure Maps Token Request
let createAzureMapsToken_Request = {
getMetadata: function () {
return {
boundParameter: null,
parameterTypes: {},
operationType: 0, operationName: ""
};
}
};

contextWebApi.execute(createAzureMapsToken_Request).then(
function success(response: any) {
if (response.ok) { return response.json(); }
}
).then(function (responseBody: any) {

let result = responseBody;
let token = result["Token"]; // Edm.String
let xMSClientId = result["X-MS-CLIENT-ID"]; // Edm.String

UpdateAzureMapOptions(xMSClientId, token);
}).catch(function (error: any) {
console.log(error.message);

context.navigation.openErrorDialog({
errorCode: error.errorCode,
details: error.message,
message: error.raw
});
});
}

const UpdateAzureMapOptions = async(ClientId: string, bearerToken: string) => {

let updatedOptions = {
...azureMapOptions,
authOptions: {
authType: AuthenticationType.anonymous,
clientId: ClientId,
getToken: async (resolve: any, reject: any) => {
resolve(bearerToken);
}
}
}

setAzureMapOptions(updatedOptions);
}

return(

{showMap &&


{
if (e.shapes && e.shapes.length > 0) {
setIsVisible(true);
}
}
}}/>


Hello World}
/>

}

);
}
`

Here is the details of the error:
[ErrorDetails.txt](https://github.com/user-attachments/files/16064237/ErrorDetails.txt)

Start with the attached ErrorDetails.txt and the AzureMapPopup usage in the TypeScript component shown in the issue. Reproduce the popup path after the map and pins render, then trace the reported getCurrentStack error through the relevant react-azure-maps or Azure Maps entry point. Done means the popup renders without the reported TypeError.

Written by the indexing model from the issue text.