title: React-Rnd one block inside other
body: <p>I am using the react-rnd library to drag and resize blocks. I created a page. It creates a gray container on it and I click on the "add global container" button and a container appears on the field that I can move and resize within the parent gray container
  <a href="https://i.stack.imgur.com/Yzvvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yzvvx.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/1oM2F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1oM2F.png" alt="enter image description here"></a></p>
  
  <p>in the left corner of the created container there is a purple button, clicking on it, another container will be created inside this container and now the first container will be the parent for the new one created.
  <a href="https://i.stack.imgur.com/Mk8IC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mk8IC.png" alt="enter image description here"></a></p>
  
  <p>the problem is that I can resize the inner container, but I can not move it, or rather, it moves with the parent component. the inner component will move inside the outer only when the parent component touches the borders of its parent, the gray container
  <a href="https://i.stack.imgur.com/9Myf0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Myf0.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/whBQD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/whBQD.png" alt="enter image description here"></a></p>
  
  <p>in code it looks like this
  I have a component , which in itself contains a  component
  the Box component is called inside Rdn - this is the block that you see on the screen, Rdn makes it move</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>type Props = {
    width: string;
    height: string;
    color: string;
  };
  
  class BoxWrapper extends React.Component&lt;Props&gt; {
    state = {
      width: "100",
      height: "40",
      x: 0,
      y: 0,
    };
  
    render() {
      const { width, height, color } = this.props;
      return (
        &lt;Rnd
          size={{ width: this.state.width, height: this.state.height }}
          position={{ x: this.state.x, y: this.state.y }}
          bounds="parent"
          onDragStop={(e: any, d: any) =&gt; {
            e.stopPropagation();
            this.setState({ x: d.x, y: d.y });
          }}
          minHeight={16}
          minWidth={16}
          onResize={(
            e: any,
            direction: any,
            ref: any,
            delta: any,
            position: any
          ) =&gt; {
            this.setState({
              width: ref.style.width,
              height: ref.style.height,
              ...position,
            });
          }}
        &gt;
          &lt;Box
            x={this.state.x}
            y={this.state.y}
            width={this.state.width}
            height={this.state.height}
            externalHeight={height}
            externalWidth={width}
            color={color}
          /&gt;
        &lt;/Rnd&gt;
      );
    }
  }
  
  export default BoxWrapper;</code></pre>
  </div>
  </div>
  </p>
  
  <p>inside the Box component, the purple button is checked and if it is pressed, you need to create the BoxWrapper component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>type BoxProps = {
    x: number;
    y: number;
    width: string;
    height: string;
    externalWidth: string;
    externalHeight: string;
    color: string;
  };
  
  class Box extends React.Component&lt;BoxProps&gt; {
    state = {
      isClick: false,
      isCreate: false,
    };
    render() {
      const {
        x,
        y,
        width,
        height,
        externalWidth,
        externalHeight,
        color,
      } = this.props;
  
      const externalH = parseInt(externalHeight);
      const externalW = parseInt(externalWidth);
      const boxWidth = parseInt(width);
      const boxHeight = parseInt(height);
      const xUpperLeft = x;
      const yUpperLeft = y;
      const xUpperRight = x + boxWidth;
      const yUpperRight = y;
      const xDownLeft = x;
      const yDownLeft = y + boxHeight;
      const xDownRight = x + boxWidth;
      const yDownRight = y + boxHeight;
  
      return (
        &lt;&gt;
          &lt;div
            style={{
              margin: 0,
              height: "100%",
              padding: 0,
              backgroundColor: color,
            }}
          &gt;
            &lt;div className="wrapper"&gt;
              &lt;button
                style={{
                  width: 0,
                  height: "14px",
                  borderRadius: "1px",
                  backgroundColor: "#fff",
                  display: "flex",
                  justifyContent: "center",
                  fontSize: 9,
                }}
                onClick={() =&gt; this.setState({ isClick: !this.state.isClick })}
              &gt;
                ?
              &lt;/button&gt;
              &lt;button
                style={{
                  width: 0,
                  height: "14px",
                  borderRadius: "1px",
                  backgroundColor: "#a079ed",
                  display: "flex",
                  justifyContent: "center",
                  fontSize: 9,
                }}
                onClick={() =&gt; this.setState({ isCreate: !this.state.isCreate })}
              /&gt;
            &lt;/div&gt;
            {this.state.isCreate &amp;&amp; (
              &lt;BoxWrapper
                width={width}
                height={height}
                color="#42d5bc"
              /&gt;
            )}
          &lt;/div&gt;
          {this.state.isClick &amp;&amp; (
            &lt;Tooltip
              leftDistance={xUpperLeft}
              topDistance={yUpperLeft}
              rightDistance={externalW - xUpperRight}
              bottomDistanse={externalH - yDownLeft}
            /&gt;
          )}
        &lt;/&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>how can I make it so that I can freely move the inner container without automatically dragging the parent container
  I tried in the <code>onDragStop</code> method in <code>Rnd</code> to specify <code>event.stopPropafgation()</code>, but it doesn’t work at all, I don’t know what to do</p>
  
  <p><a href="https://codesandbox.io/s/hidden-meadow-juudp?file=/src/app.js" rel="nofollow noreferrer">
  this is a working example of my problem the inner Rnd container has the bounds of the bounds = "parent" and the outer one is "window"</a></p>