基本上，我正在创建一个抽认卡类型的应用程序，您可以查看抽认卡（这是一个数组），也可以编辑它们。在编辑阶段，2个输入框旁边有一个按钮，您可以编辑文本或删除整个索引。问题在于删除，一旦删除按钮被点击，在正确的索引被删除的数组中，我使用控制台日志验证，但在用户界面底部的索引被删除.比如说我有一个有4个索引的数组，我删除了第二个，UI将显示1 2 3，但数组本身将有1 3 4。我不知道如何修复它，但这是我的代码：

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>
        );
}