Moving elements in react-grid-layout

Question

I'm writing a React project using react-grid-layout. I am creating multiple grids inside each other using recursion. The component looks like this:

export default function CustomLayout({ layout, onDragStart, onDragStop }) {
  const [isDraggable, setIsDraggable] = React.useState(true);

  return (
    <GridLayout
      className="layout"
      onDragStart={onDragStart}
      onDragStop={onDragStop}
      layout={layout}
      cols={24}
      rowHeight={80}
      width={1600}
      isDraggable={isDraggable}
    >
      {layout.map((item) => {
        if (item.children) {
          return (
            <div
              onClick={(e) => console.log(e.currentTarget.textContent[0])}
              key={item.i}
              style={{ background: "pink", border: "1px solid black" }}
            >
              <CustomLayout
                layout={item.children}
                onDragStart={() => {
                  setIsDraggable(false);
                }}
                onDragStop={() => {
                  setIsDraggable(true);
                }}
              />
            </div>
          );
        } else {
          return (
            <div
              key={item.i}
              style={{ background: "purple" }}
            >
              {item.i}
            </div>
          );
        }
      })}
    </GridLayout>
  );
}

I was able to add the functionality to make items on the child grids draggable (using [isDraggable, setIsDraggable]), but the problem is that if I move an item on the third level grid, I won't be able to move the item on the main grid until I move the item on the second level grid. How can this behavior be corrected?
P.S. link to my code sandbox: https://codesandbox.io/s/suspicious-tree-z2w5nn?file=/src/gridLayout.js:179-1433