Question: incorrect array index being rendered using react tsx upon deletion of an index

basically I'm creating a flashcards kind of application, where you can either go through the flashcards (which is an array) or you can edit them. in the editing phase, 2 input boxes get rendered with a button next to them where you can edit the text or you can delete that entire index. the problem lies with deletion, once the delete button is clicked, in the the correct index is deleted in the array which I verified using console logs, but in the UI the bottom index gets removed. so like lets say I have an array with 4 indexes, and i delete the 2nd, the UI will display 1 2 3, but the array it self will have 1 3 4. not really sure how to fix it but here is my code:
const [flashcardsState, setFlashcardsState] = useState(flashcards);

const handleDeleteClick = (index: number) => {
        const updatedFlashcards = [...flashcardsState];
        updatedFlashcards.splice(index, 1);
        setFlashcardsState(updatedFlashcards);
}
const handleCardChange = (cardIndex: number, fieldIndex: number, newValue: string) => {
        const updatedFlashcards = [...flashcardsState];
        updatedFlashcards[cardIndex][fieldIndex] = newValue;
        setFlashcardsState(updatedFlashcards);
};

const renderEdit = () =>{
        return (
            <div className="card-container">
                <div className="inputcardstext">
                    <h4>Front</h4>
                    <h4>Back</h4>
                </div>
                {flashcardsState.map((flashcardsState, index) => (
                    <div key={index}>
                        <div className="inputcards">
                            <input
                                type="text"
                                className='front-back'
                                defaultValue={flashcardsState[0]}
                                onChange={(e) => handleCardChange(index, 0, e.target.value)}

                            />
                            <input
                                type="text"
                                className='front-back'
                                defaultValue={flashcardsState[1]}
                                onChange={(e) => handleCardChange(index, 1, e.target.value)}
                            />
                            <button onClick={() => handleDeleteClick(index)}></button>
                        </div>
                    </div>
                ))}
            </div>
        );
}



Answer:
It's deleting the right element, your issue is that you're using the array index as they key in React (<div key={index}>), which is a no-no. You're seeing this issue because of a combination of the array key as an index and defaultValue.
TL;DR chose a different key, like
  const flashcards = [
    ["key", "a", "1"],
    ["key", "b", "2"],
    ["key", "c", "3"]
  ];
  const [flashcardsState, setFlashcardsState] = useState<string[][]>(
    flashcards
  );

  //...

        {flashcardsState.map((flashcardsState, index) => (
          <div key={flashcardsState[2]}>
            ...
          </div>
        ))}

See this example on Codepen.
Or, you can see your removal is working correctly if you change defaultValue to value (I explain why below).
You should also install ESLint which will warn you against using an array key as an index.
What's happening is you've told React each element's unique identifier is the array index. The first element in your array has index 0. React says "ok, I'll render element with id 0, and I'll remember what I rendered, to compare it later."
Then you remove element at index 0, but your array still has an element at index 0. So you give your new array back to React. React then says:

"Ok I have the same element here with id 0, so I only need to change it if the new render of id 0 is different from what I already have
React re-renders element with "id" 0, and even though it's a different element in the array, the render output is identical. This is because defaultValue is only set on first render, not on subsequent ones.
React says "ok, nothing in id 0 has changed, I'll move on and not update the DOM
React gets to "id" of 2, the last element in the array, and sees "ah, there is no longer an id of 2, I shall remove the last component in the list for you.