TransactionRevertedWithoutReasonError: Transaction has been reverted by the EVM when trying to mint an erc1155 token using web3

Question

I deployed a solidity contract on polygon mumbai testnet using remix IDE and metamask as my Environment. I'm currently trying to call the mint function that mints an ERC1155 token in exchange for ERC20 testnet usdc from the frontend using Web3(ver. 4.1.2). The function works on remix IDE, but when I call it in frontend it returns an error: "TransactionRevertedWithoutReasonError: Transaction has been reverted by the EVM".

I have created an estimate gas function and tried placing it in the gas argument.

This is the what the code looks like in frontend:

   export async function mintRegularPacks(amount, accountId) {
      try {
        if (window.ethereum) {
          console.log('Mint packs function called');
          await window.ethereum.request({ method: 'eth_requestAccounts' });
          //@ts-ignore
          const contract = new Contract(packStorageContractABI, regularPackStorageContractAddress);
          contract.setProvider(window.ethereum);
          // Call mint regular packs function
          // Estimate gas for mintPacks function
          console.log('Amount:', amount);
          const gasEstimate = await contract.methods.mintPacks(amount).estimateGas({ 
          from: accountId });
          console.log('Estimated Gas:', gasEstimate);
          const transaction = await contract.methods
            .mintPacks(amount)
            .send({ from: accountId, gas: gasEstimate.toString() });
          console.log('Regular Pack minted successfully');
    
          return transaction;
        }
      } catch (error) {
        console.error('Error minting regular pack:', error);
      }
    }

When pressing a button in frontend it calls this function:

 try {
          await mintRegularPacks(selectedMintAmount, wallet)
            .then((txHash) => {
              console.log('Transaction Hash:', txHash);
              // Handle the transaction hash as needed (e.g., display it on the UI)
            })
            .catch((error) => {
              console.error('Error:', error);
              // Handle the error (e.g., display an error message on the UI)
            });
          reduxDispatch(setSportTypeRedux(currentSport));
        } catch (error) {
          console.error('Error minting regular pack:', error);
        }

The minting function in solidity looks like this:

function mintPacks(uint256 _amount) public {
    require(_amount > 0, "Amount must be greater than 0");

    uint256 tokenRequired = packPrice.mul(_amount);
    require(token.balanceOf(msg.sender) >= tokenRequired, "Not enough tokens");
    
    require(token.approve(address(this), _amount), "Token approval failed");
    // Transfer the total amount required for packs to the contract
    require(token.transferFrom(msg.sender, address(this), tokenRequired), "Token transfer failed");

    
    uint256[] memory tokenIds = new uint256[](_amount);
    uint256[] memory amounts = new uint256[](_amount);
        
    for (uint256 i = 0; i < _amount; i++) {
        uint256 tokenId = tokenIdCounter.current();
        _mint(msg.sender, tokenId, 1, "");
        tokenIdCounter.increment();
        _mintedTokens[tokenId] = true;
        _setTokenURI(tokenURI,tokenId);
        // Update the ownerTokens mapping
        ownerTokens[msg.sender].push(tokenId);
        tokenIds[i] = tokenId;
        amounts[i] = 1;
        emit tokenPackMetadata(tokenId,tokenURI);
    }

    _mintBatch(msg.sender, tokenIds, amounts, "");

    emit PackMinted(msg.sender, _amount, tokenIds);
}

I have checked the ABI and pasted it from remix to the ABI file import in frontend after deploying and it matches.

This is the link for the contract deployed it shows an example of a failed function which calls a 'transfer' method and a successful transaction called 'MintPacks' which was called using remix. https://mumbai.polygonscan.com/address/0x00ada1b38dff832a8b85935b8b8bc9234024084a