react-paypal-js: [BUG]: Error: Unable to render because window.paypal.Buttons is undefined.

Is there an existing issue for this?

• I have searched the existing issues.

🐞 Describe the Bug

Hi, I am working with Next.js. Everything is normal until: Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { checkout } from "../checkout";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function Home() {
  return (
    <div class="bg-light">
      <div class="container">
        <main>
          <div class="py-5 text-center"></div>

          <div class="row gy-5 pb-5 bg-white">
            <div class=" col-md-7 col-lg-8 order-md-last">
              <h2 class="mb-3">Checkout</h2>
                <PayPalScriptProvider
                  options={{
                    "client-id":
                      "test",
                  }}
                >
                  <PayPalButtons
                  />
                </PayPalScriptProvider>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

😕 Current Behavior

Sometimes it is not coming, sometimes it is coming.

🤔 Expected Behavior

It should work when I reflesh the page.

🔬 Minimal Reproduction

Add your client ID to Next.js project
Reflesh the page

🌍 Environment

| Software         | Version(s) |
| ---------------- | ---------- |
| react-paypal-js  |      Newest      |
| Browser          |      Newest      |
| Operating System |    Windows 10        |

Relevant log output

Unhandled Runtime Error
Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.

Call Stack
eval
node_modules\@paypal\react-paypal-js\dist\react-paypal.esm.js (329:0)
basicStateReducer
node_modules\react-dom\cjs\react-dom.development.js (16540:0)
updateReducer
node_modules\react-dom\cjs\react-dom.development.js (16664:0)
updateState
node_modules\react-dom\cjs\react-dom.development.js (17004:0)
Object.useState
node_modules\react-dom\cjs\react-dom.development.js (17915:0)
useState
node_modules\react\cjs\react.development.js (1622:0)
PayPalButtons
node_modules\@paypal\react-paypal-js\dist\react-paypal.esm.js (309:27)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (16305:0)
updateFunctionComponent
node_modules\react-dom\cjs\react-dom.development.js (19588:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21601:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
recoverFromConcurrentError
node_modules\react-dom\cjs\react-dom.development.js (25850:0)
performConcurrentWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (25750:0)
workLoop
node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\scheduler\cjs\scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules\scheduler\cjs\scheduler.development.js (533:0)

Code of Conduct

• I agree to follow this project’s Code of Conduct

➕ Anything else?

No response