D3.js interpolate coordinates between two points forming an arc instead of a straight line

My goal is simple, I want to add direction markers on a path (like so).
The code that I’ve implemented gives the result on the initial load.

lineCoords.forEach(coords => {

    for (let i = 1; i < coords.length; i++) {
      const A = (coords[i - 1]);
      const B = (coords[i]);

      const interpolateA = d3.interpolate(A[0], B[0]);
      const interpolateB = d3.interpolate(A[1], B[1]);

      const spacing = 3;
      const distance = Math.hypot(A[0] - B[0], A[1] - B[1]);
      const numPoints = Math.max(1, Math.floor(distance / spacing));
      const range = d3.range(1, numPoints + 1);
      const points = range.map(j => {
        const t = j / (numPoints + 1);
        const interpolatedA = interpolateA(t);
        const interpolatedB = interpolateB(t);

        return [interpolatedA, interpolatedB];
      });

      onewayCoords.push(points);
    }

  })

However, when I zoom the map, the markers form an arc instead of a straight line.
Since the code above runs inside the drag event, I don’t think that’s the issue.
I suspect the problem is related to the coordinates not being precise.

If there’s a better way to achieve the desired result, please share your insights.