Javascript – Updating my redux store with data from an Api on the click of a button

I tried updating the redux store of my application using a button but each time the button is clicked and the data from the api is mapped through, it doesn’t update the store with the value as expected.

I logged the expected value (product.title) to the console then I noticed that it disappears almost immediately as it appears on the console.
What do I do to make is stay

Here is my code

import { useEffect, useState } from "react";
import "../styles/BestSellers.css";
import { useDispatch } from "react-redux";
import { setItem } from "../features/ProductState";

function BestSellers() {
  const [products, setProducts] = useState([]);
  const [count, setCount] = useState(10);
  const dispatch = useDispatch();

  useEffect(() => {
    fetch(`https://dummyjson.com/products?limit=${count}`)
      .then((res) => res.json())
      .then((data) => {
        setProducts(data.products);
      });
  }, [count]);

  const loadMore = () => {
    setCount((prevCount) => prevCount + 5);
  };

  const handleAction = (product) => {
    dispatch(
      setItem({
        title: product.title,
        image: product.image,
        price: product.price,
      })
    );
  };

  return (
    <div className="container">

      <div className="products">
        {products.map((product) => (
          <a
            onClick={() => {
              handleAction(product);
            }}
            className="link"
            href="/shop"
            key={product.id}
          >
            <div className="product">
              <h5>{product.title}</h5>
              <p>English Department</p>
              <span className="prices">
                <h4 className="discount">$16.48</h4>
                <h4>${product.price}</h4>
              </span>
            </div>
          </a>
        ))}
      </div>

      <button onClick={loadMore} className="btn">
        LOAD MORE PRODUCTS
      </button>
    </div>
  );
}

export default BestSellers;