Error in the browser and ganache crash when i check the transactions tab

Question

I am trying to run a smart contract locally on ganache and interact with it using web3.js with vanilla javascript, but when i use the contract.methods.mymethod.send({from,gas}) function i get an error in the browser and ganache crash when i check the transactions tab

this is the smart contract, a simple contract that change the value of a variable for testing purposes

// SPDX-License-Identifier: MIT
pragma solidity >=0.8.13 <0.9.0;



contract TodoList {
    uint public val = 0;

    function sendd(uint name) public {
        val = name;
    }

}

here is the migration.sol

// SPDX-License-Identifier: MIT
pragma solidity >=0.8.13 <0.9.0;

contract Migrations {
  address public owner;
  uint256 public last_completed_migration;

  modifier restricted() {
    if (msg.sender == owner) _;
  }

  constructor()  {
    owner = msg.sender;
  }

  function setCompleted(uint completed) public restricted {
    last_completed_migration = completed;
  }

  function upgrade(address new_address) public restricted {
    Migrations upgraded = Migrations(new_address);
    upgraded.setCompleted(last_completed_migration);
  }
}

truffle configs:

networks: {
 development: {
      host: "127.0.0.1",    
      port: 7545,            
      network_id: "*",       
     },
},
compilers: {
    solc: {
      version: "0.8.13",     
      // docker: true,        
      // settings: {          
        optimizer: {
          enabled: true,
          runs: 200
        },
    }
  },

i use truffle migrate to deploy the code, tried the sendd function in the truffle console and it works fine

this is the frontend code

const UserInfo = {};

const Contracts = {};

const connectMetamask = async () => {
  if (window.ethereum) {
    const accounts = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    window.web3 = new Web3(window.ethereum);
    UserInfo.address = accounts[0];
    UserInfo.netId = await window.web3.eth.net.getId();
    UserInfo.netId = Number(UserInfo.netId);

    return true;
  }
  return false;
};

const loadContract = async () => {
  try {
    const response = await fetch("../build/contracts/TodoList.json");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const json = await response.json();
    Contracts["Todo"] = new window.web3.eth.Contract(
      json.abi,
      json.networks[UserInfo["netId"]].address
    );
    Contracts.Todo.setProvider(window.web3.currentProvider);
  } catch (error) {
    console.error("Error loading TodoList.json:", error);
    return null;
  }
};

async function init() {
  await connectMetamask();
  await loadContract();
}

init();

and i am calling the sendd function like this: Contracts.Todo.methods.sendd(10).send({from:UserInfo.address})

and get these error messages:

inpage.js:1 MetaMask - RPC Error: [ethjs-query] while formatting outputs from RPC '{"value":{"code":-32603,"data":{"message":"VM Exception while processing transaction: revert","stack":"RuntimeError: VM Exception while processing transaction: revert\n at EIP1559FeeMarketTransaction.fillFromResult (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:12745)\n at Miner. (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:36703)\n at async Miner. (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:35116)\n at async Miner.mine (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:39680)\n at async Blockchain.mine (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:60063)\n at async Promise.all (index 0)\n at async TransactionPool.emit (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\node_modules\emittery\index.js:303:3)","code":-32000,"name":"RuntimeError","data":{"hash":"0x53b7b83683b6177092438dfca08bfa03d8211d7b30212d9956df5c6b79b31ec5","programCounter":92,"result":"0x53b7b83683b6177092438dfca08bfa03d8211d7b30212d9956df5c6b79b31ec5","reason":null,"message":"revert"}}}}' {code: -32603, message: [ethjs-query] while formatting outputs from RPC '{…6b79b31ec5","reason":null,"message":"revert"}}}}'}

web3_request_manager.js:124 Uncaught (in promise) s: Returned error: [ethjs-query] while formatting outputs from RPC '{"value":{"code":-32603,"data":{"message":"VM Exception while processing transaction: revert","stack":"RuntimeError: VM Exception while processing transaction: revert\n at EIP1559FeeMarketTransaction.fillFromResult (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:12745)\n at Miner. (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:36703)\n at async Miner. (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:35116)\n at async Miner.mine (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:39680)\n at async Blockchain.mine (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\dist\node\1.js:2:60063)\n at async Promise.all (index 0)\n at async TransactionPool.emit (C:\Program Files\WindowsApps\GanacheUI_2.7.1.0_x64__rb4352f0jd4m2\app\resources\static\node\node_modules\ganache\node_modules\emittery\index.js:303:3)","code":-32000,"name":"RuntimeError","data":{"hash":"0x53b7b83683b6177092438dfca08bfa03d8211d7b30212d9956df5c6b79b31ec5","programCounter":92,"result":"0x53b7b83683b6177092438dfca08bfa03d8211d7b30212d9956df5c6b79b31ec5","reason":null,"message":"revert"}}}}' at f. (https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js:2:320090) at Generator.next () at s (https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js:2:318600)