Mapbox set circle on click

HTML

<script src="	https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css">
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

map.on('load', () => {
  const points = turf.featureCollection([]);
  
  // add data source to hold our data we want to display
  map.addSource('circleData', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [],
    },
  });

  // add a layer that displays the data
	map.addLayer({
    id: 'data',
    type: 'circle',
    source: 'circleData',
    paint: {
      'circle-color': '#00b7bf',
      'circle-radius': 8,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#333',
   },
  });

  // on user click, extract the latitude / longitude, update our data source and display it on our map
	map.on('click', (clickEvent) => {
    const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
    points.features.push(turf.point(lngLat));
    map.getSource('circleData').setData(points);
  });
});