Changing the color of points in Highcharts using series.states.select.color

I have a map I created using the Highcharts map module. I am trying to make it so that when you select a point, it changes color and then returns to its original color when no longer selected. Despite following the API documentation (https://api.highcharts.com/highmaps/plotOptions.series.states.select.color) I can only get the point to change to the default select settings - grey fill with a black border.

This is the code for the chart:

(async () => {    const topology = await fetch('https://code.highcharts.com/mapdata/custom/europe.topo.json'    ).then(response => response.json());    Highcharts.mapChart('container', {        chart: {            map: topology,            margin: 0,            backgroundColor: '#fff'        },        title: {            text: ''        },        tooltip: {          headerFormat: '',          pointFormat: '{point.name}',          backgroundColor: '#333',          borderColor: '#333',          borderRadius: 0,          shadow: false,          shape: 'rect',          padding: 8,            style: {              fontSize: '1em',              fontWeight: 'normal',              color: '#fff'          },        },        legend: {          enabled: false,        },        plotOptions: {            mappoint: {              allowPointSelect: true,            states: {              select: {                color: 'red'              }            },              dataLabels: {                enabled: false                  }                }            },            mapView: {              projection: {                name: 'WebMercator'                },              zoom: 5.1,              center: [4, 52]            },        series: [{            name: 'Basemap',            borderColor: '#d3d3d3',            borderWidth: 1,            nullColor: '#fff',        }, {            type: 'mappoint',            marker: {              symbol: 'circ',              radius: 6,            },            name: 'P',            cursor: 'pointer',            data: [{                name: 'P1',                lat: 49.214439,                lon: -2.131250,            },{                name: 'P2',                lat: 51.4811,                lon: -0.6248,            },{                name: 'P3',                lat: 50.7932,                lon: -1.8843,            },{                name: 'Winchcombe Place Care Home',                lat: 51.4090,                lon: -1.3215,            },{                name: 'P4',                lat: 53.9320,                lon: -1.0694,            }],        },{            type: 'mappoint',            marker: {              symbol: 'circ',              radius: 6,            },            name: 'S',            cursor: 'pointer',            data: [{                name: 'S1',                lat: 56.2639,                lon: 9.5018,            },{                name: 'S2',                lat: 51.2977,                lon: -0.3079,            },{                name: 'S3',                lat: 51.3725,                lon: -0.4635,            }],        }]    });})();

I have tried changing the state in the individual series' sections and also using a point event instead, but no matter what happens, the point always changes to grey with a black border on the first click. I even asked the Highcharts GPT tool and the corrected code it gave me produced exactly the same results. What am I missing?

This is the codepen for the full chart:

Codepen