Contract undefined in thirdweb-dev/react – Reactjs

I am using thirdweb-dev/react to communicate with smart contract but the issue is it is giving me the contract undefined in my code with this error.

query.ts:444 Error: Could not resolve metadata for contract at 0xa2568839fCeE4A9dD05A69C811888cf021DC20B3 at fetchContractMetadataFromAddress

Here is my context file where I am logging the contract.

import { useContext,createContext } from "react";

import { useAddress,useContract,useMetamask,useContractWrite } from "@thirdweb-dev/react";
import { ethers } from "ethers";



// Creating a new context
const StateContext=createContext()



// To use the context, we need a provider that is a function which
// allow us to use the context functionalities in other parts of our app
export const StateContextProvider=({children})=>{

    // contract address 

const crowdFundedAddress='0xa2568839fCeE4A9dD05A69C811888cf021DC20B3';

    // Accessing the contract
    // Pass the contract address to useContract hook

    const {contract}=useContract('0xa2568839fCeE4A9dD05A69C811888cf021DC20B3')
   
    console.log(contract,)

    // In thirdweb, we can call the write functions as follow.
    // Write functions are those in which we pass some data to contract
    // Dummy variable names are also guiding you more

    const {mutateAsync:createProposal}=useContractWrite(contract,'createProposal')

    // Get address of Wallet

    const address=useAddress()

    // Connect the metamask Wallet

    const connect=useMetamask() 

    const publishProposal= async (title,desc,recipientAddress,amount,duration)=>{
        console.log(title,desc,'hi')

        try{

            const data= await createProposal(title,desc,recipientAddress,amount,duration)
        } catch(error){
            console.log(error)
        }


    }

    return(
        <StateContext.Provider value={{address,contract,publishProposal,connect}}>
            {children}

        </StateContext.Provider>
    )

}

export const useStateContext=()=>useContext(StateContext)

Here is index.js file

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter } from "react-router-dom";
import { ThirdwebProvider,ChainId } from "@thirdweb-dev/react";
import { StateContextProvider } from "./context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
      <ThirdwebProvider activeChain={ChainId.BinanceSmartChainTestnet}>
    <ChakraProvider>
      <BrowserRouter>
      <StateContextProvider>
        
        <App />
        </StateContextProvider>
      </BrowserRouter>
    </ChakraProvider>
        </ThirdwebProvider >
  </React.StrictMode>
);