Use of Maps Chart from Ant Design

Question

I'm using ANT DESIGN CHARTS on an example project in React.

I try to add two differents types of charts a line chart and a map chart for the moment only a copy from tutorial. But I have a trouble.

I have a my App.js like this

function App() {
  return (
    <div className="app">
      <Header title='Bienvenido' />
      <br></br>
      <Chart />
      <br></br>
      <Chart2 />
    </div>
  );
}

The first module have the code to show a line chart, its a copy from the documentation

import { Line } from '@ant-design/charts';
import React, { useState, useEffect } from 'react';

function Chart() {

  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    seriesField: 'category',
    xAxis: {
      type: 'time',
    },
    yAxis: {
      label: {
        formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
  };
  return (
    <Line {...config} />
  );
}

export default Chart;

And the second module contains an example of a map, at the same Its a copy from documentation, here only added my token from Mapbox

import React, { useState, useEffect } from 'react';
import { ChoroplethMap } from '@ant-design/maps';
function Chart2() {
    const [list, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/administrative-data/area-list.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const data = list
    .filter(({ level }) => level === 'province')
    .map((item) =>
      Object.assign({}, item, {
        value: Math.random() * 5000,
      }),
    );
  const cityData = list
    .filter(({ level }) => level === 'city')
    .map((item) =>
      Object.assign({}, item, {
        value: Math.random() * 2000,
      }),
    );
  const districtData = list
    .filter(({ level }) => level === 'district')
    .map((item) =>
      Object.assign({}, item, {
        value: Math.random() * 1000,
      }),
    );
  const config = {
    map: {
      type: 'mapbox',
      style: 'dark',
      center: [120.19382669582967, 30.258134],
      zoom: 3,
      pitch: 0,
      token: 'pwg'
    },
    source: {
      data: data,
      joinBy: {
        sourceField: 'adcode',
        geoField: 'adcode',
      },
    },
    viewLevel: {
      level: 'country',
      adcode: 100000,
    },
    autoFit: true,
    drill: {
      steps: [
        {
          level: 'province',
          source: {
            data: cityData,
          },
        },
        {
          level: 'city',
          source: {
            data: districtData,
          },
        },
        {
          level: 'district',
          source: {
            data: districtData,
          }, // color: 'green',
          // style: { opacity: 0.5 },
        },
      ],
      triggerUp: 'unclick',
      triggerDown: 'click',
    },
    color: {
      field: 'value',
      value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
      scale: {
        type: 'quantize',
      },
    },
    style: {
      opacity: 1,
      stroke: '#ccc',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    label: {
      visible: true,
      field: 'name',
      style: {
        fill: '#000',
        opacity: 0.8,
        fontSize: 10,
        stroke: '#fff',
        strokeWidth: 1.5,
        textAllowOverlap: false,
        padding: [5, 5],
      },
    },
    state: {
      active: {
        stroke: 'black',
        lineWidth: 1,
      },
    },
    tooltip: {
      items: ['name', 'adcode', 'value'],
    },
    zoom: {
      position: 'bottomright',
    },
    legend: {
      position: 'bottomleft',
    },
  };
  return (
    <ChoroplethMap {...config} />
  );
}

export default Chart2;

But when the application is compiled. Only Show the first chart and the map is empty only show the controls.

Any idea of a solution.

Thanks!!