我正在学习React网格布局，但我不能解决这个问题。当我试图拖动一个网格，它移动到我的光标右侧，而且每个网格呈现在中间开始。
我想创建一个布局，如Here示例所示

这里你可以看到我的问题的演示

我使用的代码如下所示这是网格styles_grid.css的css

import GridLayout from "react-grid-layout";
import "./react_grid_layout/styles_grid.css";
import "./react_grid_layout/styles.resize.css";

function Dashboard(props) {
  return (
    <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
      <div className="bg-white" key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2 }}>
        a
      </div>
      <div className="bg-white" key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2 }}>
        b
      </div>
      <div className="bg-white" key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
        c
      </div>
    </GridLayout>
  );
}