DataMaps js problem using async functions

Question

I've created a script that gets data from API, format the data and use it using DataMaps http://datamaps.github.io/ .

In my.js file i can simply call:

var map = new Datamap({element: document.getElementById('container')});

And it will render the map in selected div. The problem is that if i use it inside async function to get the data from an API and render the map filled with API's data I get this error:

Uncaught (in promise) TypeError: Cannot read property 'select' of undefined
    at Datamap.drawSubunits (datamaps.all.js:184)
    at draw (datamaps.all.js:789)
    at Datamap.draw (datamaps.all.js:768)
    at new Datamap (datamaps.all.js:730)
...

I even get this error if i just call the map this way inside the async function, so the data is not the problem:

async function fetchData() {
    try {
        const response = await fetch('https://corona.lmao.ninja/v2/countries?yesterday=&sort=');
        const data = await (response.json());
        var map = new Datamap({element: document.getElementById('container')});
        return data;
    } catch (error) {
        console.error(error);
    }
}
fetchData();

If I put var map = new Datamap({element: document.getElementById('container')}); outside the function it works. I have no clue about it.

Any help would be appreciated. First post and english is not my main language.

Answer 1

judging by mistake, you use the nonexistent variable 'select' or an empty variable. maybe I was wrong in spelling my English level is not so good