React issue with z-index

Question

I'm creating a react project using react-grid-layout. I have a simplified example which looks like this:
App.js:

import "./styles.css";
import React from "react";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import CustomLayout from "./gridLayout";

export default function App() {
  const layout = [
    {
      i: "divWrapper10",
      x: 0,
      y: 0,
      w: 5,
      h: 5,
      isResizable: true,
      children: [
        {
          i: "button9",
          x: 0,
          y: 0,
          w: 2,
          h: 4,
          isResizable: true
        },
        {
          i: "p8",
          x: 3,
          y: 0,
          w: 2,
          h: 4,
          isResizable: true
        }
      ]
    }
  ];

  return (
    <CustomLayout
      layout={layout}
      gridWidth={1200}
      zIndexProp={0}
      gridCols={12}
    />
  );
}

gridLayout.js:

import "./styles.css";
import GridLayout from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import styled from "styled-components";

const StyledGridLayout = styled(GridLayout)`
  .react-resizable-handle {
    z-index: ${(props) => 900 + props.zIndex} !important;
  }
`;

export default function CustomLayout({ layout, onDragStop, zIndexProp }) {
  return (
    <StyledGridLayout
      className="layout"
      onDragStart={(a, b, c, d, e) => e.stopPropagation()}
      onDragStop={onDragStop}
      layout={layout}
      cols={24}
      zIndex={zIndexProp}
      rowHeight={80}
      width={1600}
    >
      {layout.map((item) => {
        if (item.children) {
          return (
            <div
              key={item.i}
              style={{ background: "pink", border: "1px solid black" }}
            >
              <CustomLayout
                layout={item.children}
                zIndexProp={zIndexProp + 1}
              />
            </div>
          );
        } else {
          return (
            <div key={item.i} style={{ background: "purple" }}>
              {item.i}
            </div>
          );
        }
      })}
    </StyledGridLayout>
  );
}

The issue: I have nested grids which means that sometimes their resize handles can overlap one another just like in the picture (right bottom corner).
Because of that, when i try to resize the child elem, the parent elem is being resized instead. I tried some manipulations with z-index (incrementing it with each level), but it didn't help. What can I do to solve this?
Note: setting z-index to negative value works, but in my project it is not possible (real project, not this example)