React and Node Load More Button with Redux State

Inside ProductList.jsx file:

    useEffect(() => {
    setFilterProduct(products);
  }, [products]);
  useEffect(() => {
    const data = {
      skip: Skip,
      limit: Limit,
    };
    dispatch(fetchNewProducts(data));
  }, []);

  const handleLoadMore = () => {
   let skip = Skip + Limit;
   console.log(skip);
   const data = {
   skip: skip,
   limit: Limit,
  };
  dispatch(fetchNewProducts(data));
 };

BACKEND CODE:

const { skip, limit } = req.body;
    console.log(skip, limit);
    let products = await Product.find()
      .populate("category")
      .skip(skip)
      .limit(limit);

    let productsLength = await Product.find().countDocuments();

In Redux Action file:

const res = await axios.post(
  `${process.env.REACT_APP_API_ENDPOINT}/public/fetch-product`,
  data,
  config
);
dispatch({
  type: "PRODUCT_FETCH",
  payload: res.data,
});

In Redux Reducer:

case "PRODUCT_FETCH":
          return {
            ...state,
            products: payload.data,
            originalItems: payload.data,
          };

Here I'm facing two issues,

1. On first load and second load data is coming properly, but old data are not visible(Only new fetched data are listing). So in reducer I tried to case "PRODUCT_FETCH": return { ...state, products: [...state.products, payload.data], originalItems: [...state.products, payload.data], }; But here throws an error, TypeError: Cannot read properties of undefined

2. After second fetching it's not fetching more data, only the last fetched data are showing again. The bug here was limit skip is not incrementing