react: show a Highcharts map with geo points

Please tell me how to indicate geo-points (i.e. objects with latitude and longitude) on the map.

I use React and HighchartsReact. I created this code:

import Highcharts from 'highcharts'
import * as HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official'

//import mapDataWorld from 'https://code.highcharts.com/mapdata/custom/world.geo.json';
import mapDataWorld from '../jsons/maps/world.json';

const options: HighchartsMap.Options = {        
            title: undefined,
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            series: [{
                type: 'map',
                mapData: mapDataWorld,
                name: 'Great Britain',
                borderColor: '#a0a0a0',
                nullColor: 'rgba(255, 255, 255, 0.3)',
                showInLegend: false
            }, {
                type: 'mappoint',
                name: 'Cities',
                dataLabels: {
                    format: '{point.id}'
                },
                data: [{
                    id: 'London',
                    lat: 51.507222,
                    lon: -0.1275
                }, {
                    id: 'Birmingham',
                    lat: 52.483056,
                    lon: -1.893611
                }]
            }]
        };

        return (
<div className="mymap">
    <HighchartsReact
        options = {options}
        highcharts = {HighchartsMap}
        constructorType = {'mapChart'}
    />
</div>);

But the geo-point (London) is not correctly displayed on the map (ie just set to the coordinate (0,0), rather than the correct location on the map)

Please tell me what the error may be and how to fix it