cart count is not getting updated properly

screeen record of the issue: https://streamable.com/ofn42v

it is working fine in local but once deployed to production(vercel), it is not working. i have tried sooo many different things like having a separate state in cart, useEffect with totalQuantity in dependency array and nothing seems to work. Ideally when the totalQuantity inside the context is updated, the components using it should rerender as mentioned in react doc which is happening from n to 2 except for 1. can someone please help :(

my code for the cart icon in nav bar:

function Cart(props) {
  const { enableCart, totalQuantity } = useContext(AppContext);

  return (
    <>
      {enableCart ? (
        <Link href="/cart" passHref>
          <a aria-label="Shopping cart" title="Shopping cart">
            <Badge count={totalQuantity} offset={[0, 5]}>
              <ShoppingCartIcon className="w-7 h-7" />
            </Badge>
          </a>
        </Link>
      ) : null}
    </>
  );
}

Update quantity - code in appContext:

import { useCookies } from "react-cookie";
export const AppProvider = (props) => {

  const [cartItems, updateCart] = useState([]);
  const [totalQuantity, setTotalQuantity] = useState(0);
  const [cookies, setCookie] = useCookies(["cart"]);
  const cookieCart = cookies.cart;

  useEffect(() => {
    cartOperations();
  }, []);

  const calculateAmountQuantity = (items) => {
    let totalCount = 0;
    let totalPrice = 0;
    items.forEach((item) => {
      totalCount += item.quantity;
      totalPrice += item.price * item.quantity;
      setTotalAmount(totalPrice);
      setTotalQuantity(totalCount);
    });
  };

  const cartOperations = async (items) => {
    if (items !== undefined) {
      updateCart([...items]);
      calculateAmountQuantity(items);
    } else if (cookieCart !== undefined) {
      updateCart([...cookieCart]);
      calculateAmountQuantity(cookieCart);
    } else {
      updateCart([]);
      setTotalAmount(0);
      setTotalQuantity(0);
    }
  };
  
  const addItem = (item) => {
    let items = cartItems;
    let existingItem;
    if (items) existingItem = items.find((i) => i.id === item.id);

    if (!existingItem) {
      items = [
        ...(items || []),
        Object.assign({}, item, {
          quantity: 1,
        }),
      ];
      updateCart([...items]);
      setTotalAmount(totalAmount + item.price * 1);
      setTotalQuantity(totalQuantity + 1);
    } else {
      const index = items.findIndex((i) => i.id === item.id);
      items[index] = Object.assign({}, item, {
        quantity: existingItem.quantity + 1,
      });
      updateCart([...items]);
      setTotalAmount(totalAmount + existingItem.price);
      setTotalQuantity(totalQuantity + 1);
    }
    saveCartToCookie(items);
    saveCartToStrapi(items);
  };

i am storing the cart content in cookie.

code for AppContext is here in github, full nav bar code

Live url: https://sunfabb.com

Goto Products, add few items to cart, then try removing one by one from the cart page. (i have enabled react profiler in prod as well)

from cart count is not getting updated properly