Why is React Interact JS intergration not updating correctly?

Question

I am trying to integrate InteractJS and ReactJS and I am seeing a strange but predictable problem on moving items from one dropzone to another and a mismatch between the UI and the underlying state object array. I realise this is most likely a bug in my code due my limited knowledge or React updates and/or InteractJS events - or both - but after three days staring at it I am very grateful for any insight into what may be causing this problem.

I have created a minimal codesandbox to demonstrate the problem.

I can drag all of the items into a dropzone and between dropzones in reverse order and both state and rendered output correctly updates.

However if I drag an intermediate item (i.e. not the last one) from a dropzone into another, React incorrectly re-renders the object immediately succeeding the dragged item in the wrong dropzone.

My question is: Why does the React render not match the state object for intermediate items but works correctly dragging items in reverse order?

Thanks