Data not fetching from smart contract for the same code in different versions of "ethers"

[ahkharsha]

I am trying to make a dApp for real estate marketplace. I was using "ethers" 5.7.2. Everything was perfectly fine. In the various categories screen, the properties data of various properties were returnign perfectly from the smart contract and displaying in the appropriate pages.

//FETCH CONTRACT
const FETCH_CONTRACT = (PROVIDER) =>
  new ethers.Contract(REAL_ESTATE_ADDRESS, REAL_ESTATE_ABI, PROVIDER);

//CONNECTING WITH CONTRACT
const connectingWithSmartContract = async () => {
  try {
    const web3modal = new Web3Modal();
    const connection = await web3modal.connect();
    const provider = new ethers.providers.Web3Provider(connection);
    const PROVIDER = provider.getSigner();

    const contract = FETCH_CONTRACT(PROVIDER);

    return contract;
  } catch (error) {
    console.log(error);
  }
};

Now, for a screen, I am trying to use the BrowserProvider. So I upgraded my ethers to 6.8.0. Now, the page where the properties data stored in the smart contract is supposed to return and display, I am getting empty things in console.log:

But when I am using the 5.7.2 ethers version, I am getting this in console.log:

The "components" part of the data returned in both the cases seem to be different. Is the error something related to it? (PS: Im new to web3)

In v5

In v6

How to fix this error? I want to continue with v6. How to make sure that the property data is returned properly from the smart contract and that its not empty?

Links for reference:

1) Repository link - https://github.com/ahkharsha/briXchange-Test

2) store.tsx (Where browser provider is used) - https://github.com/ahkharsha/briXchange-Test/blob/main/client/PageComponents/Components/GardenComponents/store.tsx