Call multiple functions onClick on ReactJS

i have alert message. when i click button (Checkot) it must be remove all items from cart and show some alert message. fucntions is working fine when i call emptyCart() working fine and when i call notify with only toast("Wow so easy!") also everything good. But when i call them together, working only function emptyCart() and is that because emptyCart() function removing all items and button also. So toast("Wow so easy!") not working because no have button anymore. i want alert message and remove all items from wishlist. Can someone help me please?

Here is my code:

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;