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

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)