I am new to react JS , I need to drag and drop the list vertically and horizontally at the same it , I have used react-beautiful-dnd , but this library only support one direction at a time , so is there any way I can drag and drop horizontal and vertically at same time ,

Here is the link https://codesandbox.io/s/react-beautiful-dnd-horizontal-list-forked-1xijl8?file=/index.js

In this Suppose I need to drag Item9 to Item7 position , then If I drag Item9 over to Item7 then it behave wrong , correct behavior is Item7 position will be filled with Item9

Any help will be apricated.

NOTE : I don't want to use overflow : auto to show cursor , If Items are more then these should be start from next line rather showing scroller