¿Por qué no cambió la ubicación de React-grid-layout?

Creo que haga clic en el botón, las posiciones de 1 y 2 deberían intercambiarse.

Muchas gracias por avisarme!!

a continuación se muestra el código que estoy usando para esto

 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