Error creating program: TypeError: Expected Buffer

Page.tsx

"use client";import { useEffect } from "react";import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";import idl from '@/app/idl/idl.json';import { PublicKey } from '@solana/web3.js';import { Program } from "@coral-xyz/anchor";import { useAnchorProvider } from "./solana/solana-provider";const PROGRAM_ID = new PublicKey(idl.metadata.address);export default function Home() {  const provider = useAnchorProvider();  console.log('Provider:', provider);  useEffect(() => {    if (provider && idl) {      try {        const program = new Program(idl, provider);        console.log('Program:', program);      } catch (error) {        console.error('Error creating program:', error);      }    } else {      console.error('Provider or IDL is undefined');    }  }, [provider]);  return (<main className="flex items-center justify-center min-h-screen"><div className="border hover:border-slate-900 rounded"><WalletMultiButton /></div></main>  );}

solana-provider.tsx

'use client';import dynamic from 'next/dynamic';import { AnchorProvider } from '@coral-xyz/anchor';import { WalletError } from '@solana/wallet-adapter-base';import {  AnchorWallet,  useConnection,  useWallet,  ConnectionProvider,  WalletProvider,} from '@solana/wallet-adapter-react';import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';import { ReactNode, useCallback, useMemo } from 'react';import '@solana/wallet-adapter-react-ui/styles.css';export const WalletButton = dynamic(  async () =>    (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,  { ssr: false });export function SolanaProvider({ children }: { children: ReactNode }) {  const endpoint = "https://api.devnet.solana.com";  const onError = useCallback((error: WalletError) => {    console.error(error);  }, []);  return (<ConnectionProvider endpoint={endpoint}><WalletProvider wallets={[]} onError={onError} autoConnect={true}><WalletModalProvider>{children}</WalletModalProvider></WalletProvider></ConnectionProvider>  );}export function useAnchorProvider() {  const { connection } = useConnection();  const wallet = useWallet();  return new AnchorProvider(connection, wallet as AnchorWallet, {    commitment: 'confirmed',  });}

Console log

page.tsx:24 Error creating program: TypeError: Expected Buffer    at captureStackTrace (capture-stack-trace.ts:3:21)    at console.error (intercept-console-error.ts:35:28)    at Home.useEffect (page.tsx:24:17)

What Could be the issue? every example uses this structure but noone else gets expected buffer error