Not geographic coordinates in deck.gl

Question

I want to use non-geographic coordinates. I want to create a square that has 1000 pixels on one side, and 1000 pixels on the other side. Each pixel in this square corresponds to the x/y coordinates. Following the documentation deck.gl I use the parameter coordinateSystem={COORDINATE_SYSTEM.CARTESIAN} for grid layer.

Sample code results in an error deck: deck.gl: assertion failed. undefined This error will go away if I specify the initial state latitude/longitude. But this contradicts the concept of a native coordinate system and the layer data is not displayed on the canvas.

How can I fix this?

const App = () => {
  const deck = useRef(null);

  const data2 = [
    {position: [0, 0], size: 1},
    {position: [100, 100], size: 1},
    {position: [-50, 50], size: 1},
  ];

  const handleMapClick = (event) => {
    if (deck.current) {
      const {pixel, coordinate} = event;
      console.log("event", event);
      console.log('Clicked at pixels:', pixel);
      console.log("coordinates: ", coordinate)
    }
  };

  return (
    <div>
      <DeckGL
        ref={deck}
        initialViewState={{
          target: [0, 0, 0],
          zoom: 1,
        }}
        controller={true}
        debug={true}
        onClick={handleMapClick}
        style={{ background: "azure" }}
      >
        <GridLayer
          id="one-layer"
          data={data2}
          getPosition={(d) => d.position}
          getRadius={(d) => d.size}
          coordinateSystem={COORDINATE_SYSTEM.CARTESIAN}
        />
      </DeckGL>
    </div>
  );
};