Hi people,

I'm trying to integrate my next app with paddle but I get window.paddle as undefined almost always, or sometimes when i change something in code and save it, window.paddle will have values but after refresh it will be undefined again

import Script from "next/script";

export function PaddleLoader() {
  return (
    <Script
      src="https://cdn.paddle.com/paddle/paddle.js"
      onLoad={(e) => {
        if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
          Paddle.Environment.set("sandbox");
        }
        Paddle.Setup({
          vendor: env.process.VENDOR_ID, 
        });
      }}
    />
  );
}

page.tsx

"use client";

import { PaddleLoader } from "@/components/paddle/PaddleIntegration";

import { useEffect, useState } from "react";

export default function Home() {
  const [paddle, setPaddle] = useState<any>(null);

  useEffect(() => {
    if (window) {
      setPaddle(window.Paddle);
    }
  }, []);

  console.log(paddle);
  return (
    <main>
      <PaddleLoader />
      <button
        onClick={() =>
          paddle?.Checkout.open({
            method: "inline", // set to `inline`
            product: "pro_01h9rrd3e9m64mthjn5r00k871", // replace with a product ID or plan ID
            allowQuantity: false,
            disableLogout: true,
            frameTarget: "checkout-container", // className of your checkout <div>
            frameInitialHeight: 450, // `450` or above
            frameStyle:
              "width:100%; min-width:312px; background-color: transparent; border: none;", // `min-width` must be set to `286px` or above with checkout padding off; `312px` with checkout padding on.
          })
        }
      >
        Buy Now
      </button>
    </main>
  );
}