Changing property colour based on value? Mapbox JSS

Question

I've been making a map in Mapbox about the number of offstreet carparking spaces in Melbourne. I have added a layer with my tileset and now am wanting to vary the colour of the objects in that layer based on the number of parking spaces (which range 1-6000 in the dataset).

map.on('load', function() {

  map.addSource('parking', {
    type: 'vector',
    url: //*removed for privacy reasons*
  });

  var statusRanges = [{
      minSpaces: 0,
      maxSpaces: 200,
      statusName: '0-200',
      colour: '#ffddb9'
    },
    {
      minSpaces: 201,
      maxSpaces: 400,
      statusName: '201-400',
      colour: '#efbaa2'
    },
    {
      minSpaces: 401,
      maxSpaces: 600,
      statusName: '401-600',
      colour: '#d38387'
    },
    {
      minSpaces: 601,
      maxSpaces: 800,
      statusName: '601-800',
      colour: '#a6637f'
    },
    {
        minSpaces: 801,
      maxSpaces: 1000,
      statusName: '801-1000',
      colour: '#713d76'
    },
    {
      minSpaces: 1001,
      maxSpaces: 6000,
      statusName: '1000+',
      colour: '#3e196e'
    }
  ];

  for (var i = 0; i < statusRanges.length; i++) {
    var range = statusRanges[i];


    map.addLayer({
      'id': range.statusName,
      'type': 'circle',
      'source': 'parking',
      'source-layer': 'off-street-car-parks-with-cap-17ikwz',
      'paint': {
        "circle-color": range.colour
      }
    });

    map.setFilter(range.statusName, ['<=', ['get','parking_spaces'], range.maxSpaces]);
  }

});

map.addControl(new mapboxgl.NavigationControl());

The variable circles show up but are all the colour of the last category (see image below). I think there's an issue in how I'm iterating the for loop but I can't seem to figure it out. Is anyone able to assist with this? (https://i.sstatic.net/pM0Uu1fg.png)