Estoy tratando de implementar la funcionalidad de arrastrar y reemplazar usando reaccionar dnd.

 const [components, setComponents] = useState([ { id: "one", cmp: "StatsTiles", title: "StatsTiles", order: 2 }, { id: "two", cmp: "DeveloperProfile", title: `DeveloperProfile`, order: 3, }, ]);

Tengo dos componentes StatsTiles y DeveloperProfile que quiero cambiar de posición cada vez que arrastro cualquier componente en particular y paso el mouse sobre otro componente.

 {components .sort((a, b) => { let keyA = a.order, keyB = b.order; if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }) .map(({ id, cmp, title, order }, idx) => { const Comp = tilesComponent[cmp]; return ( <div ref={drag} style={{ opacity }} className="row mt-2 w-100" > <Comp /> </div> ); })}

Así es como estoy representando los componentes dentro de la página. Mi plan es cambiar el orden en la función reaccionar y soltar. Entonces el componente cambiará de posición.

Pero me enfrento a un problema aquí, Inspeccionar instantánea del elemento

Solo uno de mis elementos tiene un atributo que se puede arrastrar. No sé por qué ambos están dentro de la función de mapa. Todas las sugerencias son bienvenidas