v3:1 Uncaught (in promise) IntegrationError: Missing value for Stripe(): apiKey should be a string.

I'm getting this error in next JS when trying to use stripe pre-built checkout.

.env.local (full key replaced with ..... for stackoverflow)

NEXT_STRIPE_PUBLIC_KEY=pk_test_51Jl......

in function call

 const stripe = await loadStripe(process.env.NEXT_STRIPE_PUBLIC_KEY);

if I was to put the Publishable key directly in it works but from the env its not working for some reason

for example this would work

  const stripe = await loadStripe(`pk_test_51Jl...`);

I have the example below also and it didn't work.

const stripe = await loadStripe(`${process.env.NEXT_STRIPE_PUBLIC_KEY}`);