Error integrating Privy’s Solana Embedded Wallets with Anchor Framework

I am building my app with privy’s solana embedded wallets and anchor framework, when I try to initialize my Solana Program – it shows an error

Any idea what might be causing this?

I believe error is occurring here

        const rpsProgram = new anchor.Program(
          IDL,
          new PublicKey(PROGRAM_ID),
          provider
        );

Here is the full function

 const initializeProgram = async () => {
      if (!solanaWallet?.address) {
        console.log("Waiting for wallet...");
        return;
      }

      try {
        console.log("Initializing with wallet address:", solanaWallet.address);
        console.log("Full wallet object:", solanaWallet);
        console.log("IDL:", IDL);
        
        const connection = new Connection(DEVNET_ENDPOINT);
        console.log("Connection created");
        
        const walletAdapter = {
          publicKey: new PublicKey(solanaWallet.address),
          signTransaction: solanaWallet.signTransaction,
          signAllTransactions: async (transactions) => {
            return Promise.all(transactions.map(tx => solanaWallet.signTransaction(tx)));
          },
        };
        console.log("Wallet adapter created:", walletAdapter);

        const provider = new anchor.AnchorProvider(
          connection,
          walletAdapter,
          { commitment: 'confirmed' }
        );
        console.log("Provider created:", provider);
        console.log("IDL:", IDL);
        anchor.setProvider(provider);
        console.log("wallet id", new PublicKey(solanaWallet.address));
        console.log("Program ID:", new PublicKey(PROGRAM_ID));
        console.log("Pro")
        const rpsProgram = new anchor.Program(
          IDL,
          new PublicKey(PROGRAM_ID),
          provider
        );
        
        console.log("Program created:", rpsProgram);
        setProgram(rpsProgram);
      } catch (err) {
        console.error('Failed to initialize RPS program:', err);
        console.error('Error details:', {
          name: err.name,
          message: err.message,
          stack: err.stack
        });
        toast.error('Failed to initialize game program');
      }
    };

    initializeProgram();
  }, [solanaWallet?.address]);

Here are my log statements if it helps

Wallet adapter created: 
{publicKey: _PublicKey2, signTransaction: ƒ, signAllTransactions: ƒ}
RPSProvider.tsx:52 Provider created: 
_AnchorProvider {connection: Connection, wallet: {…}, opts: {…}, publicKey: _PublicKey2}
RPSProvider.tsx:53 IDL: 
{version: '0.1.0', name: 'rps_game', instructions: Array(8), accounts: Array(2), types: Array(2), …}
RPSProvider.tsx:55 wallet id 
_PublicKey2 {_bn: BN}
_bn
: 
BN {negative: 0, words: Array(11), length: 10, red: null}
Symbol(Symbol.toStringTag)
: 
(...)
[[Prototype]]
: 
Struct2
RPSProvider.tsx:56 Program ID: 
_PublicKey2 {_bn: BN}
_bn
: 
BN {negative: 0, words: Array(11), length: 10, red: null}
Symbol(Symbol.toStringTag)
: 
(...)
[[Prototype]]
: 
Struct2


RPSProvider.tsx:67 Failed to initialize RPS program: TypeError: Cannot read properties of undefined (reading '_bn')
    at initializeProgram (RPSProvider.tsx:58:28)
    at RPSProvider.tsx:77:5
initializeProgram   @   RPSProvider.tsx:67
(anonymous) @   RPSProvider.tsx:77
RPSProvider.tsx:68 Error details: 
{name: 'TypeError', message: "Cannot read properties of undefined (reading '_bn')", stack: 'TypeError: Cannot read properties of undefined (re….vite/deps/chunk-IYNIHSXD.js?v=fbe42c5d:18119:15)'}
initializeProgram   @   RPSProvider.tsx:68
(anonymous) @   RPSProvider.tsx:77

Sharing my types file as well

export const IDL: RpsGame = {
  "version": "0.1.0",
  "name": "rps_game",
  "instructions": [ // instructions]
}
export type RpsGame = {
  "version": "0.1.0",
  "name": "rps_game",
  "instructions": [ // instructions]
}