Add multiple geometries from one GeoJSON source

Add a polygon and circle layer from the same GeoJSON source. See the example: https://docs.mapbox.com//mapbox-gl-js/example/multiple-geometries/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'your mapbox token';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [-121.403732, 40.492392],
  zoom: 10,
  pitch: 80
});

map.on('load', () => {
  map.addSource('national-park', {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': [{
          'type': 'Feature',
          'properties': {
            'isCircle': true
          },
          'geometry': {
            'type': 'Point',
            'coordinates': [-121.415061, 40.506229]
          }
        },
        {
          'type': 'Feature',
          'properties': {
            'isCircle': true
          },
          'geometry': {
            'type': 'Point',
            'coordinates': [-121.505184, 40.488084]
          }
        },
        {
          'type': 'Feature',
          'properties': {
            'isCircle': true
          },
          'geometry': {
            'type': 'Point',
            'coordinates': [-121.354465, 40.488737]
          }
        },
        {
          'type': 'Feature',
          'properties': {
            'isCircle': false
          },
          'geometry': {
            'type': 'Point',
            'coordinates': [-121.385169, 40.369777]
          }
        }
      ]
    }
  });

  map.addLayer({
    'id': 'park-volcanoes',
    'type': 'circle',
    'source': 'national-park',
    'paint': {
      'circle-radius': 6,
      'circle-color': '#B42222',
    },
    'filter': ['==', ['get', 'isCircle'], true]
  });

  map.loadImage(
    'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
    (error, image) => {
      if (error) throw error;

      // Add the image to the map style.
      map.addImage('cat', image);

      // Add a layer to use the image to represent the data.
      map.addLayer({
        'id': 'points',
        'type': 'symbol',
        'source':...