Which Wagmi hooks do you use to fetch a contract Instance in NextJs?

Question

I am trying to fetch campaign data from the contract deployed here so that I can display a list of available campaigns to users.

I have tried several things, including getting an instance of the contract using the getContract method, but it's not working. When I log the output, I get The contract data is: [object Object]. The code looks something like this;

const contract = getContract({
    address: saveAKidAddr,
    abi: contractAbi,
  });

  const getCampaigns = async () => {

    const campaigns = await contract.read.getCampaigns();

    const parsedCampaigns = campaigns.map((campaign, i) => ({
      owner: campaign.owner,
      title: campaign.title,
      description: campaign.description,
      target: formatEther(campaign.target.toString()),
      deadline: campaign.deadline,
      amountCollected: formatEther(campaign.amountCollected.toString()),
      image: campaign.image,
      pId: i,
    }));

    console.log(`The contract data is: ${campaigns}`);
    return parsedCampaigns;
  };

I have also tried using other methods such as useContractRead but I'm also having problems fetching the campaign data and showing it in my frontend.

const { data: readData, isLoading: readLoading } = useContractRead({
      address: saveAKidAddr,
      abi: contractAbi,
      functionName: "getCampaigns",
    });

I struggled with this for a couple of days and now I really need help. I'm a beginner dev so if anything looks trivial please understand.

To understand my code more this is my repo