Why Storyblok preview does not work properly in my NextJS, Vercel deployed project?

Question

When I was working on the project locally, everything worked fine.
as soon as I deployed my project to Vercel, the storyblok preview stopped working. The changes work only when I publish the storyblok changes, leading to redeployment of the whole vercel project.
When I move a blok in the storyblok content, it moves fine but whenever I press 'Save', It just returns back how it was.

I have checked ENV variables, everything seems to be correct.
I tried debugging locally, but worked totally fine.
I tried looking in the Vercel Logs and found nothing.
I did find some errors when using storyblok in the browser, as shown in the image.

Storefront error, meaning there is an error with shopifyAPI, but I do not understand why it happens.
This is my function for storefront:

//Assigning Storefront access token and the shop URL
const storefrontAccessToken: any =
  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
const storeURL: any = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN;

export async function storefront(query: any, variables = {}) {
  try {
    const response = await fetch(storeURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": storefrontAccessToken,
      },
      body: JSON.stringify({ query, variables }),
    });
    const JSONResponse = await response.json();
    return JSONResponse;
  } catch (error: any) {
    console.error("Storefront Error:", error);
  }
}

This error occurs only in production but not when I try running the project locally.

index.tsx code:

export default function Home({ story, products }: any) {

  //Enable the Visual Editor
  story = useStoryblokState(story);

  return (
    <>
      <ProductsProvider value={products}>
        <StoryblokComponent blok={story.content} />
      </ProductsProvider>
    </>
  )
}

export async function getStaticProps() {
  const storyblokApi = getStoryblokApi();
  //home is the default slug for the homepage in Storyblok
  let slug = 'home';

  //Load draft version
  let sbParams: any = {
    version: "draft" //Or 'published
  };
  // Recieve storyblok data
  let { data }: any = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
  // Recieve shopify data
  const shopifyData: any = await storefront(productsQuery);

  return {
    props: {
      //Storyblok
      story: data ? data.story : false,
      key: data ? data.story.id : false,
      //Shopify
      products: shopifyData.data,
    },
    revalidate: 3600,
  }
}