Maptiler не распознает пользовательский идентификатор карты в переключателе стилей

В демо здесь я работаю над картой Maptiler, используя два типа карт по умолчанию и два пользовательских типа карт в переключателе стилей и один слой. Предполагается, что код будет переключаться между стилями при перезагрузке слоя geojson при каждом изменении стиля. Он отлично работает со стилями карт по умолчанию, но не с пользовательскими типами. Пользовательские типы вообще не загружаются. Опечатки проверены, пользовательские стили опубликованы и работают на различных примерах.

<select class = "mapstyles-select">
    <option value = "e8a7d286-0cf1-4165-bac7-7b1854bb30a0" selected>Natural</option>
    <option value = "75422893-dc2f-40fe-af5b-fd89c0ea92d3">Light</option>
    <option value = "SATELLITE">Satellite</option>
    <option value = "TOPO">Topo</option>
  </select>
  
    maptilersdk.config.apiKey = 'MY API KEY';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: "e8a7d286-0cf1-4165-bac7-7b1854bb30a0",
      center: [100.507, 13.7231], // starting position [lng, lat]
      zoom: 10, // starting zoom
    });
    document.querySelector('.mapstyles-select').addEventListener('change', (e) => {
      const style_code = e.target.value.split(".");
      console.info(style_code)
      map.setStyle(maptilersdk.MapStyle[style_code[0]][style_code[0]], {
                  transformStyle: (previousStyle, nextStyle) => {
                    var custom_layers = previousStyle.layers.filter((layer) => {
                      console.info(layer.source)
                      if (layer.source) {
                        return (
                          layer.source.startsWith('my-polygon')
                        );
                      }
                    });

                    var layers = nextStyle.layers.concat(custom_layers);
                    var sources = nextStyle.sources;
                    for (const [key, value] of Object.entries(previousStyle.sources)) {
                      if (key.startsWith('my-polygon')) {
                        sources[key] = value;
                      }
                    }

                    return {
                      ...nextStyle,
                      sources: sources,
                      layers: layers,
                    };
                  }
                });
    });
    
    map.on('load', () => {
          map.addSource('my-polygon', {
            'type': 'geojson',
            'data': {
              'type': 'Feature',
              'properties': {},
              'geometry': {
                'coordinates': [
                  [
                    [
                      100.53964892087583,
                      13.660619302818347
                    ]
                ]
                ]
                'type': 'Polygon'
              }
            }
          });
          map.addLayer({
            'id': 'my-polygon',
            'type': 'fill',
            'source': 'my-polygon',
            'layout': {},
            'paint': {
              'fill-color': '#FF0000',
              'fill-opacity': 0.5
            }
          });
        });

Я пробовал использовать имя своего пользовательского идентификатора карты, например «myTopo», и пробовал использовать одинарные кавычки вместо двойных, но не знаю, почему это не работает. Мои пользовательские карты работают здесь, но слой не сохраняется в других стилях. Вот соответствующий код этой версии:

<select class = "mapstyles-select">
    <option value = "e8a7d286-0cf1-4165-bac7-7b1854bb30a0" selected>Natural</option>
    <option value = "75422893-dc2f-40fe-af5b-fd89c0ea92d3">Light</option>
    <option value = "SATELLITE">Satellite</option>
    <option value = "TOPO">Topo</option>
  </select>
  
    maptilersdk.config.apiKey = 'MY API KEY';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: "e8a7d286-0cf1-4165-bac7-7b1854bb30a0",
      center: [100.507, 13.7231], // starting position [lng, lat]
      zoom: 10, // starting zoom
    });
    document.querySelector('.mapstyles-select').addEventListener('change', (e) => {
      const style_code = e.target.value.split(".");
        map.setStyle(maptilersdk.MapStyle[style_code[0]] || style_code[0]);
    });
    
    map.on('load', () => {
          map.addSource('my-polygon', {
            'type': 'geojson',
            'data': {
              'type': 'Feature',
              'properties': {},
              'geometry': {
                'coordinates': [
                  [
                    [
                      100.53964892087583,
                      13.660619302818347
                    ]`
                  ]
                ],
                'type': 'Polygon'
              }
            }
          });
          map.addLayer({
            'id': 'my-polygon',
            'type': 'fill',
            'source': 'my-polygon',
            'layout': {},
            'paint': {
              'fill-color': '#FF0000',
              'fill-opacity': 0.5
            }
          });
        });


Ideally, I would be able to use custom map styles and default map styles with whatever layers and have those layers persist across styles. In both code examples I abbreviated the geojson.