paddle not working in next 13

"use client";
import Script from "next/script";
import { createContext, useContext, useEffect, useState } from "react";

type PaddleContext = any;

const PaddleContext = createContext<PaddleContext>(null);

const usePaddleContext = () => {
  const context = useContext(PaddleContext);

  if (context === undefined) {
    throw new Error("usePaddleContext was used outside of its Provider");
  }
  return context;
};

const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
  const [paddle, setPaddle] = useState(null);

  return (
    <PaddleContext.Provider value={paddle}>
      <Script
        strategy="afterInteractive"
        src="https://cdn.paddle.com/paddle/v2/paddle.js"
        onLoad={() => {
          Paddle.Environment.set("sandbox");

          Paddle.Setup({ vendor: 123123 });

          setPaddle(Paddle);
        }}
      />
      {children}
    </PaddleContext.Provider>
  );
};
export { PaddleProvider, PaddleContext, usePaddleContext };

Uncaught Error: [PADDLE] You must specify your Paddle Seller ID within the Paddle.Setup() method. See: https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout
    at t.Setup (paddle.js:1:30692)
    at HTMLScriptElement.onLoad (webpack-internal:///(:3000/app-pages-browser)/./src/components/paddle/PaddleProvider.tsx:38:28)
    at HTMLScriptElement.eval (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/script.js:99:24)

[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".