Why I keep getting undefined? I’m using Stipe with Next.JS

I have my .env.local as per below:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = pk_test_apikeycontinues
STRIPE_SECRET_KEY = sk_test_apikeycontinues

and this is my ./app/utils/stripe.js file:

import Stripe from 'stripe';

export const stripe = Stripe(process.env.STRIPE_SECRET_KEY);

Now this is my code on my homepage:

'use client'

import { stripe } from "./utils/stripe";

export default function Home({ products }) {
  console.log(products);
  
  return (
    <div>
      home
    </div>
  )
}

export async function getStaticProps() {
  const inventory = await stripe.products.list({
    limit: 5,
  });
  
  return {
    props: {
      products: inventory,
    },
  };
}

I have already an existing inventory in the test preview, but I keep getting “undefined” on my console log.

I tried encoding the API key inside the homepage and skip the other 2 files just to test it out, but I still keep getting undefined.

'use client'

import Stripe from 'stripe';

export const stripe = Stripe("sk_test_apikeycontinues");

export default function Home({ products }) {
  console.log(products);
  
  return (
    <div>
      home
    </div>
  )
}

export async function getStaticProps() {
  const inventory = await stripe.products.list({
    limit: 5,
  });
  
  return {
    props: {
      products: inventory,
    },
  };
}

Where am I going wrong?