How to store product-info into session in WooCommerce using Next.js and headless wordpress

I am currently working on a Next.js project. As I’m building an online-shop, I also want to create a shopping-cart. I use wordpress (headless) via graphql and the api of WooCommerce. Now the idea is to somehow store the product information into a session or using the local storage. I think storing the product id would be sufficient, because I want to sell online products that have an unlimited quantity and each customer can only download the product once. What do I have to do in order that WooCommerce understands, what I want to achieve? Is it possible instead of using an endpoint to just use the product-info from a JSON? (This is probably not so secure, but as I am only testing. It should be fine) I have read that also cookies have to be written in order for WooCommerce to work and save the selected product into the shopping-cart. I would be very thankful for any help

Down below I show you part of my current state...

main file for the cart:

import { getSession, storeSession } from './session';
import { getAddOrViewCartConfig } from './api';
import axios from 'axios';
import { ADD_TO_CART_ENDPOINT } from '../constants/endpoints';
import { isEmpty } from 'lodash';

export const addToCart = (productId: int, qty: int = 1) => {
  const storedSession = getSession();
  const addOrViewCartConfig = getAddOrViewCartConfig();
  axios.post(
      ADD_TO_CART_ENDPOINT, //instead of using an endpoint, I would like to pull the desired info from a JSON file
      data: {
        product_id: productId,
        quantity: qty,
      },
      addOrViewCartConfig
    )
    .then((res: AxiosResponse<any>) => {
      if (!isEmpty(storedSession)) {
        storeSession(res?.headers?.['x-wc-session']);
      }
      viewCart();
    })
    .catch((err) => {
      console.log('err', err);
    });
};

getAddOrViewCartConfig from api:

import { getSession } from './session';
import { isEmpty } from 'lodash';

export const getAddOrViewCartConfig = () => {
  const config = {
    headers: {
      'X-Headless-CMS': true,
    },
  };
  const storedSession = getSession();
  if (!isEmpty(storedSession)) {
    config.headers['x-wc-session'] = storedSession;
  }
  return config;
};

getSession, storeSession from session

import { isEmpty } from "lodash";

export const storeSession = (session) => {
    if(isEmpty(session)){
        return null;
    }
    localStorage.setItem('x-wc-session',session);
}
export const getSession = ()=>{
    return localStorage.getItem(key:'x-wc-session');
}