Strange behavior of conditional nested allotments in React

[Sergey-Shapovalov]

Hello,

I've found a problem with nested allotments using React. If I have nested allotments and generate the outer one conditionally (imagine I have a button like "Show/Hide the List"), when removing the outer allotment, the inner one reuses the properties of the outer one instead of it's own properties. For example, if the outer allotment is vertical and the inner one is horizontal, after redrawing the page without the outer one you will have only the inner allotment with vertical layout. It applies to all properties, for example, the defaultSizes one.

I've created a sandbox to reproduce the issue. Depending on a state variable, the app draws either a nested allotment, or just the internal one. Pressing the Switch Allotment button below switches the state variable and redraws the app. As you can see, the inner horizontal allotment is taking the orientation and the defaultSizes of the outer one.

https://codesandbox.io/s/hopeful-paper-zy2mnr?file=/src/App.js