Dynamically changing the layer order is not possible

Hello, In my use case I have a list of layers whose order can be messed up with.
I made this sandbox to test the behaviour of inverting the second and third items in a list of four. The second item is put at the top of the layering.

Reproduce the bug:
https://codesandbox.io/s/shy-waterfall-fwky3

I tried adding the array index in the layer key but the third layer goes to the top instead of bellow the forth. Maybe this is because the forth layer's key didn't change, so it is not kept above all other layers ?

I also tried using a random key for the layers. This eliminates the order issue but might be bad for performance. In the second sandbox I tried to dynamically change the key of the layers only after a change in order and not on every render.

Expected behaviour:
https://codesandbox.io/s/brave-firefly-zr9oc

If a fix might break other use cases, maybe a new prop to the Layer component that specify we want to keep the order could be possible?

Thanks

Start with the Layer component and reproduce the ordering difference using the two linked CodeSandbox cases. Compare the reported index-based and random-key approaches, then verify that dynamically swapping layers preserves the expected stacking order without requiring random keys.