React state infinite loading while using react-grid-layout

Question

I am using react-grid-layout for my learning and implemented a simple example. Based on the documentation, we'll get the updated layout values on onLayoutChange function and getting the below error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I have written my code like this.

import "./styles.css";
import React, { useCallback, useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";

const ResponsiveGridLayout = WidthProvider(Responsive);

export default function App() {
  const [generatedLayouts, setGeneratedLayouts] = useState({
    lg: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    md: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    sm: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    xs: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ]
  });
  const handleLayoutChange = useCallback((layout, allLayouts) => {
    setGeneratedLayouts(allLayouts);
    // return JSON.parse(JSON.stringify(layout));
  }, []);

  /* const generateDOM = () => {
    return 
  }; */

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ResponsiveGridLayout
        className="layout"
        layouts={[]}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 16, md: 16, sm: 6, xs: 4, xxs: 2 }}
        margin={[16, 16]}
        containerPadding={[0, 0]}
        rowHeight={100}
        onLayoutChange={handleLayoutChange}
        isResizable={false}
        isDraggable
        useCSSTransforms
        onBreakpointChange={(breakpoint) => {
          console.log("breakpoint", breakpoint);
        }}
      >
        {generatedLayouts?.lg?.map((a, i) => {
          console.log("asdsad", `${a.i} ${i}`, i);
          return (
            <div key={`${a.i} ${i}`} style={{ border: "1px green solid" }}>
              Some element {i}
            </div>
          );
        })}
      </ResponsiveGridLayout>
    </div>
  );
}

If I comment onLayoutChange, it's rendering only one time.

Attaching the Sandbox here. I'm guessing the sandbox is taking xs as the breakpoints and not throwing errors but that's not showing anything on UI also. If you try to open the preview in a new tab, the breakpoints are lg and the state is updating infinite times. I would be grateful if someone helps where am I missing.