Calculating cart price functionality in a ecommerce using Reactjs (Github link attached)

I am trying to make cart's total price functionality. I have made an array of objects and I am using context API what I am not able to do is I can't increase or decrease the quantity and calculate the total price.

I tried to add the quantity object in context API but that does not work because we can not use object as child in React.

Github Repo

// My components

1. Products

import React from "react";
import { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";

const Products = () => {
  const { products, increaseValue, itemValue } = useContext(GlobalContext);

  return (
    <div>
      {products.map((item) => (
        <div style={{ marginTop: "20px" }} key={item.id}>
          <div>{item.title} </div>
          <div>price - {item.price} </div>
          <button
            onClick={() => {
              increaseValue(item.id);
            }}
          >
            +
          </button>
          <span>{itemValue}</span>
          <button>-</button>
        </div>
      ))}
    </div>
  );
};

export default Products;

2. TotalPrice

import React, { useContext, useEffect, useState } from "react";
import { GlobalContext } from "../context/GlobalState";

const TotalPrice = () => {
  const { products } = useContext(GlobalContext);
  const [cartPrice, setCartPrice] = useState(0);

  useEffect(() => {
    const cartTotal = products.reduce((acc, item) => {
      return acc + parseInt(item.price);
    }, 0);
    setCartPrice(cartTotal);
  }, [products]);

  return (
    <div style={{ marginTop: "20px", fontWeight: "bold" }}>
      Cart Total - {cartPrice}
    </div>
  );
};

export default TotalPrice;

// Context API

1. GLobalState

import React, { createContext, useReducer } from "react";
import AppReducer from "./AppReducer";

const productValue = {
  products: [
    { id: 1, title: "Product-1", price: "80" },
    { id: 2, title: "Product-2", price: "30" },
    { id: 3, title: "Product-3", price: "50" },
  ],
  itemValue: 0,
};

export const GlobalContext = createContext(productValue);

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, productValue);

  const increaseValue = (id) => {
    dispatch({
      type: "INCREASE_VALUE",
      payload: id,
    });
  };

  return (
    <GlobalContext.Provider
      value={{
        products: state.products,
        increaseValue,
        itemValue: state.itemValue,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
};

2. App Reducer

export default (state, action) => {
  switch (action.type) {
    case "INCREASE_VALUE":
      return {
        ...state,
        itemValue: {
          ...state.products.map((item) => {
            if (item.id === action.payload) {
              state.itemValue++;
            }
            return state.itemValue;
          }),
        },
      };
    default:
      return state;
  }
};