Как изменить код, чтобы на клике кнопки "Так" в модальном окне добавлялся товар, по которому сделан клик?

Учусь React, помогите пожалуйста

class App extends Component {
    state = {
        data: [],
        cards: [],
        carts: [],
        favoriteCards: [],
        isModalOpen: false,
        isButton: true,
        modalProps: {},
    };

    addToCarts = card => {
        this.setState(current => {
            const carts = [...current.carts];

            const index = carts.findIndex(el => el.article === card.article);

            if (index === -1) {
                carts.push({ ...card, count: 1 });
            } else {
                carts[index].count += 1;
            }

            return { carts };
        });
    };

    toggleModal = value => {
        this.setState({ isModalOpen: value });
    };

    render() {
        const { cards, carts, isModalOpen } = this.state;

        return (
            <>
                <Header carts={carts} favoriteCards={favoriteCards} />
                <main>
                    <section className={styles.leftContainer}>
                        <CardsContainer
                            cards={cards}
                            isModalOpen={isModalOpen}
                            toggleModal={this.toggleModal}
                        />
                    </section>

                    <section className={styles.rightContainer}>
                        <h2>Корзина</h2>
                        <CartContainer
                            carts={carts}
                        />
                    </section>
                    <Modal
                        isModalOpen={isModalOpen}
                        toggleModal={this.toggleModal}
                        background="#ff4d4d"
                        header={'Ви хочете додати цей товар у корзину?'}
                        closeButton={true}
                        cards={cards}
                        carts={carts}
                        addToCarts={this.addToCarts}
                    />
                </main>
            </>
        );
    }
}

class Modal extends PureComponent {
    render() {
        const {
            header,
            closeButton,
            background,
            isModalOpen,
            toggleModal,
            cards,
            addToCarts,
        } = this.props;

        if (!isModalOpen) {
            return null;
        }

        return (
            <>
                <div className={styles.wrapper} style={{ background }}>
                    <div className={styles.header}>
                        <h2 className={styles.headerText}>{header}</h2>
                        {closeButton && (
                            <button
                                className={styles.closeBtn}
                                onClick={() => {
                                    toggleModal();
                                }}
                            >
                                X
                            </button>
                        )}
                    </div>
                    <div className={styles.body}>
                        <div className={styles.bodyBtn}>

                            <button
                                className={styles.button}
                                onClick={() => {
                                    addToCarts(...cards);
                                    toggleModal();
                                }}
                            >
                                ТАК
                            </button>

                            <button
                                className={styles.button}
                                onClick={() => {
                                    toggleModal();
                                }}
                            >
                                НІ
                            </button>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

class CardsContainer extends Component {
    render() {
        const { cards, addToCarts, toggleModal } =
            this.props;

        return (
            <>
                <ul className={styles.list}>
                    {cards.map(({ name, prise, url, article, color, isFavorite }) => (
                        <li key={article}>
                            <CardItem
                                name={name}
                                prise={`Ціна: ${prise}`}
                                url={url}
                                article={`Артикул: ${article}`}
                                color={`Колір: ${color}`}
                                setCardFavorite={setCardFavorite}
                                isFavorite={isFavorite}
                                addToCarts={addToCarts}
                                toggleModal={toggleModal}
                                setModalProps={setModalProps}
                            />
                        </li>
                    ))}
                </ul>
            </>
        );
    }
}

class CardItem extends PureComponent {
    render() {
        const {
            name,
            prise,
            url,
            article,
            color,
            toggleModal,
        } = this.props;

        return (
            <>
                <div className={styles.card}>
                    <button
                        type="button"
                        className={styles.btn}
                        onClick={() => {
                            setCardFavorite(url);
                        }}
                    >
                        <img
                            className={styles.likeButton}
                            src={!isFavorite ? star : starFill}
                            alt="favorite"
                        />
                    </button>

                    <h4 className={styles.name}>{name}</h4>
                    <img src={url} alt={name} className={styles.img} />
                    <h5 className={styles.prise}>{prise}</h5>
                    <h5 className={styles.article}>{article}</h5>
                    <h5 className={styles.color}>{color}</h5>
                    <div className={styles.btnContainer}>
                        <Button
                            text="Додати у корзину"
                            backgroundColor="#ff4d4d"
                            onClick={() => {
                                toggleModal(true);
                            }}
                        />
                    </div>
                </div>
            </>
        );
    }
}