d3.js not displaying geoJSON properly after simplification

I am trying to display a geoJSON map using d3.js. I have a geoJSON file that is far too large. d3 will display that one just fine. However, when I run it through the mapshaper simplification tool, d3 starts displaying weird shapes like squares, half donuts, circles (dependent on the projection I am using, I suspect). The weird thing is, I bring the same simplified geoJSON data into leaflet, other mapbox.io, etc, and it works! I really cannot figure this out and any help is much appreciated.

The large, functioning geoJSON

The smaller, non-functioning geoJSON

const geojson = await d3.json(geojsonUrl);

const projection = d3.geoMercator().fitSize([width, height], geojson);

const path = d3
    .geoPath()
    .projection(projection)
    .context(canvas.getContext("2d"));

const context = canvas.getContext("2d");

context.clearRect(0, 0, width, height);

context.strokeStyle = "#333";
context.lineWidth = 1;
context.fillStyle = "#69b3a2";

geojson.features.forEach((feature) => {
    context.beginPath();
    path(feature);
    context.fill();
    context.stroke();
});