Tengo una serie de cadenas que se ven así

 ['sass', 'css', 'daniel', 'javascript', 'figma', 'html', 'git', 'react', 'blank']

Está en estado y paso la matriz a un componente secundario como accesorios, para iterarlo y crear una lista, que se muestra dentro de un tablero de elementos.

[ 1 , 2 , 3]

[ 4 , 5 , 6]

[ 7 , 8 , 9]

. Cuando hago clic en un botón, la matriz se mezcla con los mismos elementos y se pasa nuevamente a los accesorios.

 const SlidePuzzle = ({puzzleItems}) => { return ( <div className="slidePuzzleContainer"> {puzzleItems.map((item, index) => { return <PuzzleItem item={item} key={index} />; })} </div> )};

Pensé que la lista de elementos no se volvía a representar cuando cambiaban los accesorios. Pero lo fueron, y cambiaron su orden en el DOM. Solo que mantuvieron su posición anterior en el tablero. Resuelvo esto eliminando la clave o configurándola en el índice de la matriz (que sé que no es lo mejor). ¿Podría explicar por qué sucede esto y si hay una mejor manera de resolverlo? Muchas gracias..... :)