I am working with react-dnd. What I am trying to achieve is dragging the block from the left and dropping it between already existing blocks. I have tried to replicate my issue in codesandbox. Link to which is here I am facing two issues here

First Issue:

As we continue to add blocks from the leftbar their is some issue and the blocks stop getting added to the rightbar. (To recreate the issue try adding couple of blocks to the rightbar, you can see it after adding 4 to 5 blocks).

code Reference:

after element is drop below function is called which i think where the exact issue is but not sure. You can find it in Dustbin.js file in codesandbox

const addBlock = (id, newBlock) => {
    const newBlockList = [...blocks];
    let index = newBlockList.findIndex((el) => el.id === id);
    if (index > -1) {
      newBlockList.splice(index, 0, newBlock);
      setBlocks(newBlockList);
    }
  };

Second Issue:

Since I am always adding the blocks above the droppable block. I am unable to figure out how to add the element to the last?

Please correct me what I am doing wrong? or any suggestions will be helpful.