Distorted h3 hexagons using h3js with Mapbox

When a user clicks on a Mapbox streets-v11 map, I’m attempting to:

1. Take the clicked point, and identify the h3 hexagon (at resolution 10) around the point
2. Convert the hexagon coordinates into the polygon hexPolygon
3. Highlight building features (from streets-v11/composite source) within hexPolygon

Currently, this functionality is working as expected, except the h3 hexagon coordinates are forming a narrow distorted hexagon. Below is an image of the distorted hexagons being created.

Here is a jsbin with my code. To reproduce, can zoom in on the map until you see buildings render, and click on the map. At that point, a narrow hexagon of buildings should appear highlighted.

(You can then copy the hexPolygon object from the console and paste it into a tool like geojson.io to view the polygon that was created)

And here is the function:

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]);

  console.log(h3Index);
  console.log(hexCenterCoordinates);
  console.log(hexBoundary);


  const hexPolygon = {
    type: 'Feature',
    properties: {
      paint: {
        "line-color": "red"
      }
    },
    geometry: {
      type: 'Polygon',
      coordinates: [hexBoundary]
    }
  };


  var features = map.querySourceFeatures("composite", {
    sourceLayer: "building"
  });

  console.log("features:");
  console.log(features);

  const collector = [];

  console.log('hexPolygon:');
  console.log(hexPolygon);

  for (let i = 0; i < features.length; i++) {

    const feature = features[i]

    if (feature.geometry.type === "Polygon" && turf.booleanWithin(feature, hexPolygon)) {
      collector.push(features[i]);
    }
  }

  console.log("collector:");
  console.log(collector);

  const buildingsHighlightedLayer = map.getSource("buildings");
  buildingsHighlightedLayer.setData({
    type: "FeatureCollection",
    features: collector
  });
});