Сортировка DOM элементов по возрастанию id в JavaScript?

Question

[VvTt]

Как лучше выполнить сортировку элементов, отрисованных в Drag and Drop при возвращении элемента обратно в изначальную зону?
Суть проблемы в том, что при переносе элемента из одной дроп зоны(div2) в другую(div1) и обратно(в div2) он добавляется в конец списка.
Мне интересно как выполнить сортировку элементов после этого по порядку id
Логика работы такая:
*элементы отрисовываются в div2
*перетаскиваем элемент в div1
*перетаскиваем элемент из div1 в div2
*элемент вставляется в конец списка и (должен)перемещается на изначальное место

Вот что имеем:

let numIdr = 0
const [wor, setWor] = useState([
        { id: 0, text: ['I', 'speak', 'three', 'languages'] },
    ])
const DragStartHandler = (e: any, elem: string) => {
        elemtext = elem
        e.dataTransfer.setData('id', e.target.id)  
    }

    const DropHandler = (e: any, elemtext: string) => {
        e.preventDefault()
        let itemId = e.dataTransfer.getData('id')      
        let block = e.target.id 

        if (block == 'div1') {        
            if (dropArr.indexOf(elemtext) == -1) {  
            }
        }
        if (block != 'div1') {        // дроп зона перечисленных слов
            if (dropArr.indexOf(elemtext) != -1) {
            }
        }
        e.currentTarget.append(document.getElementById(itemId))
return(
 <div>
                <span
                    id='div1'
                    onDragOver={(e) => DragOverHandler(e)}
                    onDrop={(e) => DropHandler(e, elemtext)}
                >
                </span>
            </div>
            <div>
                <span
                    id='div2'
                    onDragOver={(e) => DragOverHandler(e)}
                    onDrop={(e) => DropHandler(e, elemtext)}
                >
                    {wor[position].text.map(s => {
                        return (
                            <>
                                <span
                                    id={`${numId++}`}
                                    draggable={true}
                                    onDragStart={(e) => DragStartHandler(e, s)}  
                                >
                                    {s}
                                </span>
                            </>
                        )
                    })}
                </span>
            </div>
</div>
)