[Fragman]

Доброго времени суток, товарищи. Нужна ваша помощь. Это кусок кода из реакта. Что здесь не так? Через map я строю карточки(тут всё ок)

this.state = {
            cards: [
                { id: '1', header: 'Первая карточка', checked: false },
                { id: '2', header: 'Вторая карточка', checked: false },
                { id: '3', header: 'Третья карточка', checked: false },
                { id: '4', header: 'Четвертая карточка', checked: false },
                { id: '5', header: 'Пятая карточка', checked: false },
            ],
        };

Однако при попытке выделить их и удалить лишнее вроде бы тоже всё ок, но лишь первых пару раз, потом всё съезжает набекрень и удаляется либо не то, что надо, либо вылетает ошибка. Кажется дело в индексации, и наверное нужно как-то проверять ещё и id, а не только проверку на выделение. Здесь карточка выделяется:

showChecked = (props) => {
        let num = Number(props);
        num--;
        let cards = [...this.state.cards];
        if (this.state.cards[num].checked) {
            cards[num] = { ...cards[num], checked: false };
        } else {
            cards[num] = { ...cards[num], checked: true };
        }
        this.setState({ cards });
    };

А здесь всё фильтруется:

removeCards = () => {
        let cards = this.state.cards.filter((card) => !card.checked);
        this.setState({ cards });
    };

P.S. Наверное за последних пару дней поехал уже, и не вижу очевидного