react-grid-layout cannot reset to original preconfigured layout after dragging elements

Question

Using react-grid-layout

With the following code if I

1. click on "set layouts 1" (or 2) then
2. Drag an item
3. click on the SAME "set layouts 1" (or 2) the grid layout does not reset to the original.

If after dragging the elements and I click the other layout button and then the original one then both do work again.

Why is this, and how do I force it to reset the layout directly (without intermediate step of setting another layout)

import React, { useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "/node_modules/normalize.css/normalize.css";
import "/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
import "/node_modules/@blueprintjs/core/lib/css/blueprint.css";

const ResponsiveReactGridLayout = WidthProvider(Responsive);

export function App(): any {
  console.log("app called");
  var layout1 = [
    { w: 1, h: 1, x: 0, y: 1, i: "1", moved: false, static: false },
    { w: 1, h: 1, x: 1, y: 2, i: "2", moved: false, static: false },
    { w: 1, h: 1, x: 2, y: 3, i: "3", moved: false, static: false },
    { w: 1, h: 1, x: 3, y: 4, i: "4", moved: false, static: false }
  ];

  var layout2 = [
    { w: 1, h: 1, x: 2, y: 1, i: "1", moved: false, static: false },
    { w: 1, h: 1, x: 3, y: 3, i: "2", moved: false, static: false },
    { w: 1, h: 1, x: 4, y: 4, i: "3", moved: false, static: false },
    { w: 1, h: 1, x: 5, y: 5, i: "4", moved: false, static: false }
  ];

  const presetLayouts1 = {
    lg: layout1,
    md: layout1,
    sm: layout1,
    xs: layout1,
    xxs: layout1
  };

  const presetLayouts2 = {
    lg: layout2,
    md: layout2,
    sm: layout2,
    xs: layout2,
    xxs: layout2
  };
  const [layouts, setLayouts] = useState(presetLayouts1);

  var gridResponse = (
    <div key="main1">
      <button
        key="5233FC6D-B38A-430A-930C-99978922950C"
        onClick={() => setLayouts(presetLayouts2)}
      >
        Set Layouts 2
      </button>

      <button
        key="6233FC6D-B38A-430A-930C-99978922950C"
        onClick={() => setLayouts(presetLayouts1)}
      >
        Set Layouts 1
      </button>
      <ResponsiveReactGridLayout
        
        cols={{ lg: 12, md: 10, sm: 6, xs: 6, xxs: 6 }}
        compactType="vertical"
        layouts={layouts}
        isDraggable={true}
        isResizable={true}
        //rowHeight={15}
        measureBeforeMount={false}
        autoSize={true}
        breakpoints={{ lg: 1200, md: 1000, sm: 800, xs: 600, xxs: 400 }}
      >
        <div key="1" style={{ padding: "15px" }}>
          Div content 1
        </div>
        <div key="2" style={{ padding: "15px" }}>
          Div content 2
        </div>
        <div key="3" style={{ padding: "15px" }}>
          Div content 3
        </div>
        <div key="4" style={{ padding: "15px" }}>
          Div content 4
        </div>
      </ResponsiveReactGridLayout>
    </div>
  );

  return [gridResponse];
}
export default App;