Estoy trabajando con react-dnd. Lo que estoy tratando de lograr es arrastrar el bloque desde la izquierda y soltarlo entre bloques ya existentes. He intentado replicar mi problema en codesandbox. Enlace al cual está aquí Me enfrento a dos problemas aquí

Primer problema:

A medida que continuamos agregando bloques desde la barra izquierda, hay algún problema y los bloques dejan de agregarse a la barra derecha. (Para recrear el problema, intente agregar un par de bloques a la barra derecha, puede verlo después de agregar 4 o 5 bloques).

código de referencia:

después de que el elemento esté debajo de la función, se llama, creo que dónde está el problema exacto, pero no estoy seguro. Puede encontrarlo en el archivo Dustbin.js en 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); } };

Segundo problema:

Dado que siempre estoy agregando los bloques sobre el bloque desplegable. No puedo averiguar cómo agregar el elemento al último.

Por favor, corrígeme ¿qué estoy haciendo mal? o cualquier sugerencia será útil.