Why didn't the location of React-grid-layout change?

I think click the button the positions of 1 and 2 should be swapped.

Thank you so much for letting me know !!

below is the code I am using for this

import React from "react";
import ReactDOM from "react-dom";
import RGL, { WidthProvider } from "react-grid-layout";

import "./styles.css";

const ReactGridLayout = WidthProvider(RGL);

let idCounter = 0;

class MinMaxLayout extends React.PureComponent {
  static defaultProps = {
    isDraggable: true,
    isResizable: true,
    items: 5,
    rowHeight: 30,
    preventCollision: false,
    cols: 12
  };

  state = {
    layout: [
      { x: 0, y: 0, w: 3, h: 3, i: "1" },
      { x: 0, y: 1, w: 3, h: 3, i: "2" }
    ]
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.addNewItem}>Add item</button>
        <ReactGridLayout {...this.props}>
          {this.state.layout.map((item) => {
            console.log(item);
            return (
              <div key={item.i} data-grid={item}>
                <span>{item.i}</span>
                <span>{idCounter++}</span>
              </div>
            );
          })}
        </ReactGridLayout>
      </React.Fragment>
    );
  }

  addNewItem = () => {
    this.setState({
      ...this.state,
      layout: [
        { x: 0, y: 1, w: 3, h: 3, i: "1" },
        { x: 0, y: 0, w: 3, h: 3, i: "2" }
      ]
    });
  };
}

module.exports = MinMaxLayout;

if (require.main === module) {
  require("../test-hook.jsx")(module.exports);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MinMaxLayout />, rootElement);

https://codesandbox.io/s/react-grid-layout-forked-u3q4x?file=/src/index.js:0-1673