problem with adding to cart

[patrykr124]

Hey!
I've been struggling with this for a few days now and can't seem to figure it out....
Specifically, I'm concerned with the ability to add products to the cart using the + icon and to remove the product using - in the section on the page.
I do not want to use a separate subpage for the product just to create ala calculator, the products are saved as a list, (I attach a picture)
Would you be able to advise me? my code...

Product list component -

`
"use client";
import { type ProductListItemFragment } from "@/gql/graphql";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import { useState } from "react";

export function ProductElement({
	product,
}: { product: ProductListItemFragment } & { loading: "eager" | "lazy"; priority?: boolean }) {
	const [quantity, setQuantity] = useState(0);

	const handleQuantityChange = (e) => {
		setQuantity(parseInt(e.target.value, 10) || 0);
	};

	const handleAddClick = async () => {
		await fetch("/api/cart", {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({
				productId: product.id,
				quantity: quantity,
				channel: "default-channel",
			}),
		});
	};

	const handleRemoveClick = async () => {
		await fetch("/api/cart", {
			method: "DELETE",
			headers: {
				"Content-Type": "application/json",
			},
			body: JSON.stringify({
				productId: product.id,
				quantity: quantity,
				channel: "default-channel",
			}),
		});
	};
	return (
		<li data-testid="ProductElement">
			{/* <LinkWithChannel href={`/products/${product.slug}`} key={product.id}> */}
			<div>
				<div className="mt-2 flex gap-10">
					<div className="input-box flex items-center justify-center">
						<AddIcon style={{ fontSize: "16px" }} onClick={() => setQuantity(quantity + 1)} />
						<input type="number" value={quantity} onChange={handleQuantityChange} />
						<RemoveIcon
							style={{ fontSize: "24px" }}
							onClick={() => quantity > 0 && setQuantity(quantity - 1)}
						/>
					</div>
					
					<div>
						<h3 className="mt-1 text-sm font-semibold text-neutral-900">{product.name}</h3>
						{/* <p className="mt-1 text-sm text-neutral-500" data-testid="ProductElement_Category">
								{product.category?.name}
							</p> */}
					</div>
					{/* <p className="mt-1 text-sm font-medium text-neutral-900" data-testid="ProductElement_PriceRange">
							{formatMoneyRange({
								start: product?.pricing?.priceRange?.start?.gross,
								stop: product?.pricing?.priceRange?.stop?.gross,
							})}
						</p> */}
				</div>
			</div>
			{/* </LinkWithChannel> */}
		</li>
	);
}
`

Cart.ts in pages/api -

`import { executeGraphQL } from "@/lib/graphql";
import { CheckoutAddLineDocument, CheckoutDeleteLinesDocument } from "@/gql/graphql";
import * as Checkout from "@/lib/checkout";

export default async function handler(req, res) {
	const { productId, quantity, channel } = req.body;

	const checkoutId = await Checkout.getIdFromCookies(channel);
	if (!checkoutId) {
		res.status(404).json({ error: "Checkout not found" });
		return;
	}

	try {
		if (req.method === "POST") {
			// Dodanie produktu do koszyka
			const result = await executeGraphQL(CheckoutAddLineDocument, {
				id: checkoutId,
				productVariantId: productId,
				quantity,
			});
			res.status(200).json(result);
		} else if (req.method === "DELETE") {
			// Usunięcie produktu z koszyka
			const result = await executeGraphQL(CheckoutDeleteLinesDocument, {
				id: checkoutId,
				productVariantId: productId,
				quantity,
			});
			res.status(200).json(result);
		}
	} catch (error) {
		res.status(500).json({ error: "Internal server error" });
	}
}
`

GRAPHQL -

as unknown as TypedDocumentString<ChannelsListQuery, ChannelsListQueryVariables>;
export const CheckoutAddLineDocument = new TypedDocumentString(`
    mutation CheckoutAddLine($id: ID!, $productVariantId: ID!) {
  checkoutLinesAdd(id: $id, lines: [{quantity: 1, variantId: $productVariantId}]) {
    checkout {
      id
      lines {
        id
        quantity
        variant {
          name
          product {
            name
          }
        }
      }
    }
    errors {
      message
    }
  }
}`   
`as unknown as TypedDocumentString<CheckoutCreateMutation, CheckoutCreateMutationVariables>;
export const CheckoutDeleteLinesDocument = new TypedDocumentString(`
    mutation CheckoutDeleteLines($checkoutId: ID!, $lineIds: [ID!]!) {
  checkoutLinesDelete(id: $checkoutId, linesIds: $lineIds) {
    checkout {
      id
    }
    errors {
      field
      code
    }
  }
}

I have a 500 error...

thx!