Calculating the correct gap between custom cursor

I’m having an issue where I’m trying to create a custom cursor/crosshair within my canvas. The issue I have is the specified Length, Width, and Gap given to the four rectangles to form the cursor is producing the incorrect amount of pixels for the center gap.

Live CodeSandbox: https://codesandbox.io/s/nifty-resonance-bcl0m

Code:

import "./styles.css";
import { Stage, Layer, Rect } from "react-konva";

export default function App() {
  const length = 15;
  const width = 4;
  const gap = 3;
  const x = 400 / 2;
  const y = 400 / 2;
  return (
    <div className="App">
      <Stage width={400} height={400}>
        <Layer>
          {/* Horizontal Rectangles */}
          <Rect
            x={x + (width / 2 + gap)}
            y={y - width / 2}
            width={length}
            height={width}
            fill="green"
          />
          <Rect
            x={x - (length + width / 2 + gap)}
            y={y - width / 2}
            width={length}
            height={width}
            fill="green"
          />
          {/* Vertical Rectangles */}
          <Rect
            x={x - width / 2}
            y={y - (length + width / 2 + gap)}
            width={width}
            height={length}
            fill="blue"
          />
          <Rect
            x={x - width / 2}
            y={y + (width / 2 + gap)}
            width={width}
            height={length}
            fill="blue"
          />
        </Layer>
      </Stage>
    </div>
  );
}

In the above example, measuring the cursors Length and Width is the correct amount but, the center gap is giving 10 pixels instead of 6 pixels (Gap * 2). I know the issue must be due to how I’m calculating the X/Y positions of each rectangle but I can’t seem to find the correct formula that doesn’t throw off the whole look of the cursor.