How can I fix 'missing revert data in call exception' error when retrieving data from a smart contract on Mumbai testnet using web3?

Question

I need some help with my web3 Dapp.

It is a next.js frontend that interacts with a solidity smart contract deployed to Mumbai testnet.

I keep getting this error interacting with the dapp.

Error retrieving election details: Error: missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (transaction={"to":"0xb2D4AFb50C98D582968cAcD24D6432Fdb0a45a82","data":"0x379b721d","accessList":null}, code=CALL_EXCEPTION, version=providers/5.7.2)
at Logger.makeError (index.js?dd68:224:1)
at Logger.throwError (index.js?dd68:233:1)
at eval (fallback-provider.js?e405:559:1)
at Array.forEach (<anonymous>)
at FallbackProvider.eval (fallback-provider.js?e405:539:1)
at Generator.next (<anonymous>)
at fulfilled (fallback-provider.js?e405:5:43) 

Smart contract function that is being called in the frontend:

function allElections() public view returns(electionInfo []memory) {

    uint currentIndex = 0;

    electionInfo[] memory allCreatedElections = new electionInfo[] (electionCount);

    for(uint i = 0; i < electionCount; i++){
            uint currentElectionId = i + 1;
            // reference current election details  
            electionInfo storage currentElection = electionIdToDetails[currentElectionId];
            // store current election in myElections array 
            allCreatedElections[currentIndex] = currentElection;
            // increase index
            currentIndex += 1;
    }
    return allCreatedElections;
}

Frontend function

// import { useProvider } from "wagmi";
const wagmiProvider = useProvider();

const electionTest = async () => {
const ethersVote = new ethers.Contract(
  ElectionContract,
  Electionabi.abi,
  wagmiProvider // provider
);

try {
  const details = await ethersVote.allElections();

  const elections = details.map(async (election) => ({
    ElectionId: election.electionId.toNumber(),
    ElectionName: ethers.utils.parseBytes32String(election.electioName),
    Creator: election.electionCreator,
    Address: election.electionAddress,
  }));

  setElectionInfo(elections);
} catch (error) {
  console.error("Error retrieving election details:", error);
}
};

The data from the smart contract function is rendered in MUI table

<TableContainer component={Paper}>
    <Table aria-label="All Elctions Table" stickyHeader>
      <TableHead>
        <TableRow>
          <TableCell align="right"> Election Id</TableCell>
          <TableCell align="right"> Election Name</TableCell>
          <TableCell align="right"> Election Address</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {electionInfo.map((election, index) => (
          <TableRow
            key={index}
            hover
            onClick={() => {
              handleNext(election.Address);
            }}
            style={{ cursor: "pointer" }}
          >
            <TableCell align="right" role="checkbox">
              {election.ElectionId}
            </TableCell>
            <TableCell align="right">{election.ElectionName}</TableCell>
            <TableCell align="right">{election.Address}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

I can't really pinpoint the issue, the function worked fine when deployed to localhost with hardhat. The best I can think of is the issue is with the provider.

After asking chatGpt for a solution, and going through multiple solutions step by step this is the only solution I have not implement yet.

Update Provider: Ensure that you are using an up-to-date version of the provider library (providers/5.7.2 in your case). Consider updating to the latest version or trying a different provider library if available.

The provider is a rainbowkit/wagmi provider created with my alchemy credentials configured is _app.js.

The expected result is an array of elections created on the platform.