I have an array of strings that look like this

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

It is in state and I pass the array to a child component as props, to iterate it and create a list, that is displayed inside a board of items

[ 1 , 2 , 3]

[ 4 , 5 , 6]

[ 7 , 8 , 9]

. When I click a button the array is mixed up with the same elements and passed again to props

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

I thought the list of items was not re rendering when props changed. But they were indeed, and changed their order in the DOM. Just that they kept their previous position in the board. I solve this by removing the key or setting it to the index of the array (that I know is not the best). Could you please explain why this happens and if there's a better way to solve this ? Thank you so much..... :)