How to handle "Too many glyphs being rendered in a tile." warning in MAPBOX?

We have a use case where we have to render around 80,000 or more icon's in symbol layer in Mapbox.

But as per current version of Mapbox I am not able to do so. Once reaching a certain limit(more than 50K, I guess) I am getting a mapbox warning and also feeling jank.

"Too many glyphs being rendered in a tile."

and

[.WebGL-0x7fa29181a600]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 4

Attaching a JSFiddle:

https://jsfiddle.net/dollysingh3192/jnypxcsd/8/

Code

    var latBounds = [-122, -77];
      var lngBounds = [30, 50];
      
    var features = [];
    
      for( var i=0; i<80000; i++ ){
        var lat = Math.random() * (latBounds[1]- latBounds[0] + 1) + latBounds[0];
        var lng = Math.random() * (lngBounds[1]- lngBounds[0] + 1) + lngBounds[0];
        features.push({
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [lat, lng]
          },
          "properties": {
            "title": "point_" +i,
            "marker-symbol": "harbor"
          }
        });
      }
      var geoJSON = {
        "type": "FeatureCollection",
        "features": features
      };
      
        mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
        var map = new mapboxgl.Map({
            container: 'map',
            center: [-7.370968683627908, -86.98521854932295],
            style: 'mapbox://styles/mapbox/streets-v11'
        });
    
        map.on('load', function() {
            map.loadImage(
                'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
                function(error, image) {
                    if (error) throw error;
                    map.addImage('cat', image);
                    map.addSource('point', {
                        'type': 'geojson',
                        'data':geoJSON
                    });
                    map.addLayer({
                        'id': 'points',
                        'type': 'symbol',
                        'source': 'point',
                        'layout': {
                            'icon-image': 'cat',
                            'icon-size': 0.1,
                            'icon-allow-overlap': true
                        }
                    });
                }
            );
        });

I have no idea, How to handle this use case?

Can anyone please suggest is there anything i am missing or something that needs to add to fix this or some workaround?