Question: Can I prevent Rnd from being dragged onto a child of the bound parent?

[msueping]

I have a div (let's call it "container") which contains a Rnd that I want to be able to be dragged and stay within the "container". There is also another div within this "container" (let's call it "no fly zone"). I do not want the Rnd to be able to be dragged and left inside the "no fly zone". Is it possible to have this behavior with react-rnd?

I'm using react-rnd version 10.3.7

My browser is: Chrome Version 101.0.4951.54

I am sure this issue is not a duplicate

Reproduced project

https://codesandbox.io/s/purple-resonance-5613rb?file=/src/index.js:0-935

Steps to Reproduce

1. Visit my codesandbox.
2. Drag the "Rnd" over the red bordered area
3. Notice that I can drop it there. How can I prevent this?