Как получить всплывающее уведомление при добавлении товара в корзину в react JS

---

Привет,

Я создаю демо-приложение для магазина игр с помощью React JS, и когда я добавляю игру в свою корзину, я хочу, чтобы всплывало всплывающее уведомление о том, что "новая игра была добавлена в корзину" или что-то в этом роде.

Поэтому я установил <pre lang="Javascript">react-toastify и в моем addtocartбыл функцию, после всех строк другого кода, я ставлю:

toast("A new game has been added to your cart");

И я нажал на кнопку Добавить в корзину, и она вообще не дала мне уведомления о тостах. Этот это мой репозиторий на GitHub. Проблема заключается в продуктах.jsx. Вот код, в котором я застрял:

const addToCart = (product) => {
    let newCart = [...cart];
    let itemInCart = newCart.find((item) => product.name === item.name);

    if (itemInCart) {
      itemInCart.quantity++;
    } else {
      itemInCart = {
        ...product,
        quantity: 1,
      };
      newCart.push(itemInCart);
    }

    setCart(newCart);
    toast("A new game has been added to your cart");
  };

Я вызываю его сюда:

return (
    <>
      <h1>Home</h1>
      <div className="idk">
        <ul className="flex cards">
          {products.map((product, index) => (
            <li key={index}>
              <h2>{product.name}</h2>
              <div className="space3"></div>
              <img src={product.image} alt={product.name} />
              <div className="space"></div>
              <div className="thiscard">
                <button onClick={() => (window.location.href = product.link)}>
                  Buy
                </button>
              </div>
              <h4>${product.cost}</h4>
              <div className="cart-container">
                <div className="space2"></div>
                <div className="anotheridk">
                  <a className="cart" onClick={() => addToCart(product)}>
                    <FaCartPlus />
                  </a>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </>
  );

Пожалуйста, помогите, спасибо!

Что я уже пробовал:

Я попытался пересмотреть свой код, но это не помогло.

---

toast("A new game has been added to your cart");

alert("A new game has been added to your cart");