Вызов нескольких функций onClick на ReactJS

У меня есть предупреждающее сообщение. Когда я нажимаю кнопку «Оформить заказ», он должен удалить все товары из корзины и показать предупреждающее сообщение. Функции работают нормально — когда я вызываю emptyCart(), он работает нормально, и когда я вызываю notify() только с toast("Wow so easy!"), это тоже нормально. Однако, когда я вызываю их вместе, кажется, что работает только функция emptyCart(), и это потому, что функция emptyCart() удаляет все элементы и кнопку. Это означает, что toast("Wow so easy!") не работает, потому что кнопки больше нет. Я хочу получить предупреждающее сообщение и удалить все элементы из списка желаний. Может кто-то мне помочь, пожалуйста?

Вот мой код:

import React, { useEffect } from 'react';
import { Button, Container, Col, Row, Table } from 'react-bootstrap';
import { useCart } from 'react-use-cart';
import { useThemeHook } from '../GlobalComponents/ThemeProvider';
import { BsCartCheck, BsCartX } from 'react-icons/bs';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Cart = () => {
    const [theme] = useThemeHook();
    const {
        isEmpty,
        items,
        cartTotal,
        updateItemQuantity,
        removeItem,
        emptyCart,
    } = useCart();
    useEffect(() => {
        document.title = "Superfront | Cart";
    });
    const notify = () => {
        toast("Wow so easy!");
        emptyCart();
    };
    
   

    return (
        <Container className = "py-4 mt-5">
            <h1 className = {`${theme ? 'text-light' : 'text-light-primary'} my-5 text-center`}>
                {isEmpty ? 'Your Cart is Empty' : 'The Cart'}
            </h1>
            <Row className = "justify-content-center">
                <Table responsive = "sm" striped bordered hover variant = {theme ? 'dark' : 'light'} className = "mb-5">
                    <tbody>
                        {items.map((item, index) => {
                            return (
                                <tr key = {index}>
                                    <td>
                                        <div style = {{
                                            background: 'white', height: '8rem', overflow: 'hidden', display: 'flex',
                                            justifyContent: 'center', alignItems: 'center'
                                        }}>
                                            <div style = {{ padding: '.5rem' }}>
                                                <img src = {item.image} style = {{ width: '4rem' }} alt = {item.title} />
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p style = {{ fontStyle: 'italic', fontSize: '15px' }}>{item.category}</p>
                                        <h6 style = {{ whiteSpace: 'nowrap', width: '14rem', overflow: 'hidden', textOverFlow: 'ellipsis' }}>
                                            {item.title}
                                        </h6>
                                        <p style = {{ width: '300px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{item.description}</p>
                                    </td>
                                    <td><del style = {{ fontSize: '15px' }}>$ {item.price * 2}</del> $ {item.price}</td>
                                    <td>Quantity ({item.quantity})</td>
                                    <td>
                                        <Button onClick = {() => updateItemQuantity(item.id, item.quantity - 1)} className = "ms-2">-</Button>
                                        <Button onClick = {() => updateItemQuantity(item.id, item.quantity + 1)} className = "ms-2">+</Button>
                                        <Button variant = "danger" onClick = {() => removeItem(item.id)} className = "ms-2">Remove Item</Button>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </Table>
                {!isEmpty &&
                    <Row
                        style = {{ bottom: 0 }}
                        className = {`${theme ? 'bg-light-black text-light' : 'bg-light text-balck'} justify-content-center w-100`}
                    >
                        <Col className = "py-2">
                            <h4>Total Price: $ {cartTotal}</h4>
                        </Col>
                        <Col className = "p-0" md = {4}>
                            <Button variant = "danger"
                                className = "m-2"
                                onClick = {() => emptyCart()}
                            >
                                <BsCartX size = "1.7rem" />
                                Clear Cart
                            </Button>
                            <Button onClick = {()=>{
                                notify();
                            }}  variant = "success"
                                className = "m-2"
                            >
                                <BsCartCheck size = "1.7rem" />
                                
                                Checkout
                                
                            </Button>
                            <ToastContainer />
                        </Col>
                    </Row>}
            </Row>
        </Container>
    );
};

export default Cart;