splitting the world map into grids with h3

Question

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiYWhtZXRiYXlyYWtjaSIsImEiOiJja3lqN2lzemwxcDZnMzBxcDZ3OHVrdjU5In0.jgPDOZKWtnkHlZiinlNK6Q';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: [-103.5917, 40.6699],
            zoom: 3
        });

        map.on('load', () => {
 
            map.addSource('earthquakes', {
                type: 'geojson',
 
                data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
                cluster: true,
                clusterMaxZoom: 14,  
                clusterRadius: 50  
            });

map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson',
});
            map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                paint: {
 
                    'circle-color': [
                        'step',
                        ['get', 'point_count'],
                        '#51bbd6',
                        100,
                        '#f1f075',
                        750,
                        '#f28cb1'
                    ],
                    'circle-radius': [
                        'step',
                        ['get', 'point_count'],
                        20,
                        100,
                        30,
                        750,
                        40
                    ]
                }
            });

            map.addLayer({
                id: 'cluster-count',
                type: 'symbol',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': '{point_count_abbreviated}',
                    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                    'text-size': 14
                }
            });

            map.addLayer({
                id: 'unclustered-point',
                type: 'circle',
                source: 'earthquakes',
                filter: ['!', ['has', 'point_count']],
                paint: {
                    'circle-color': '#ccc',
                    'circle-radius': 10,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#fff'
                }
            });
            map.addLayer(
{
'id': 'urban-areas-fill',
'type': 'fill',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
 
} 
);

 
            map.on('click', 'clusters', (e) => {
                const features = map.queryRenderedFeatures(e.point, {
                    layers: ['clusters']
                });
                const clusterId = features[0].properties.cluster_id;
                map.getSource('earthquakes').getClusterExpansionZoom(
                    clusterId,
                    (err, zoom) => {
                        if (err) return;

                        map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                    }
                );
            });
 
            map.on('click', 'unclustered-point', (e) => {
                const coordinates = e.features[0].geometry.coordinates.slice();
                const mag = e.features[0].properties.mag;
                const tsunami = e.features[0].properties.tsunami === 1 ? 'yes' : 'no';

 
                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                }
                new mapboxgl.Popup()
                    .setLngLat(coordinates)
                    .setHTML(
                        `magnitude: ${mag}<br>Was there a tsunami?: ${tsunami}`
                    )
                    .addTo(map);
            });
            map.on('mouseenter', 'clusters', () => {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', () => {
                map.getCanvas().style.cursor = '';
            });
            map.on("click", function (e) {
  // Convert a lat/lng point to a hexagon index at resolution 10
  const h3Index = h3.geoToH3(e.lngLat.lng, e.lngLat.lat, 10);
  // Get the center of the hexagon
  const hexCenterCoordinates = h3.h3ToGeo(h3Index);
  // Get the vertices of the hexagon
  const hexBoundary = h3.h3ToGeoBoundary(h3Index);
  hexBoundary.push(hexBoundary[0]); 
});
 
    });
        
    </script>

I found node.js examples for what I'm trying to do, but I don't know node.js. I need to run what is done here in html with js.

I want to create a new point to h3index code in map.on click. how can i make these dots to be hexagon instead of round?

I've been trying for a long time and I couldn't. example : https://www.marketplace.ovr.ai