D3 Robinson projection gives curves latitude lines

I have some javascript using d3 that can draw a map using a robinson projection, and I can even draw a simple box atop the map using my projection to build a path generator. However, the box I get out is curved along its horizontal lines:

I thought the robinson project gave perfectly horizontal latitude parallels. This is the code I'm using to generate the box:

this.projection = geoRobinson()
    // center and scale to container properly
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);

// outline of mexico according to some website:
const south = 14.5388286402;
const west = -117.12776;
const north = 32.72083;
const east = -86.811982388;

const box: Feature<Geometry, GeoJsonProperties> = {
    type: "Feature",
    geometry: {
        type: "Polygon",
        coordinates: [[
            [east, south],
            [west, south],
            [west, north],
            [east, north],
            [east, south],
        ]]
    },
    properties: {}
};

const pathGenerator = geoPath().projection(projection);
const d = pathGenerator(box);

// ...
<svg>
  // ... draw countries

  // draw box:
  <path d={d} style={{ stroke: "#ff5d5d", strokeWidth: 2, fill: "#FFC9C9"}} />
</svg>

Am I using the projection wrong? The box is supposed to represent all the points within the bounding latitudes and longitudes. I know that great circles curve around the earth both horizontally and vertically, but using robinson I would have expected the horizontal lines to be flat. If this isn't wrong, how can I draw