Error in Ropsten: The network id specified in the truffle config (3) does not match the one returned by the network (1)

Question

There are similar questions but I could not find the solution. maybe because smart contract tools are developing so fast. here is the setting for ropsten in truffle config.

ropsten: {
      networkCheckTimeout: 10000,
      provider: () =>
        new HDWalletProvider({
          mnemonic: {
            phrase: config.metamask_mnemonic,
          },
          providerOrUrl: config.ropsten_network,
        }),

      network_id: 3, // ropsten id
      // Instead of passing "from", you could pass third argument to the new HDWalletprovider as the index of account
      from: "0x3FB83280e44B4c1b77E8fb3ce6e0E1C271BE1659",
      gas: 710000000000, // Ropsten has a lower block limit than mainnet
      confirmations: 2, // # of confs to wait between deployments. (default: 0)
      timeoutBlocks: 200, // # of blocks before a deployment times out  (minimum/default: 50)
      skipDryRun: true, // Skip dry run before migrations? (default: false for public nets )
    },

And I set the web3 successfully. The contract is deployed successfully. I confirm on the etherscan. Nonetheless here is the web3 setup:

import Web3 from "web3";

const HDWalletProvider = require("@truffle/hdwallet-provider");
const { config } = require("../truffle/config");
const provider = new HDWalletProvider({
  mnemonic: {
    phrase: config.metamask_mnemonic,
  },
  providerOrUrl: config.ropsten_network,
});
const web3 = new Web3(provider);
// console.log("web3", web3);

export default web3;

This is where I interact with the contract. I am using next.js. I create a form and define onSubmit method which will be called upon clicking on the button:

const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();

    if (window.ethereum) {

      const connected_account = await window.ethereum.request({
        method: "eth_requestAccounts",
      });
      try {
        setLoading(true);
        setError("");

        await supplyChainFactoryInstance.methods
          .createSupplyChain(supplyChainTitle)
          .send({
            from: connected_account[0],
            // chainId: 1,
          });
        setSuccessMessage("New Cupply Chain successfully created");
        Router.push("/");
      } catch (err) {
        console.log("erroer in creating supply chain ", err);
        setError(err.message);
      }
      setLoading(false);
    }

Contract is deployed successfully but when I submit the form, I m getting an error. So I try to debug the code with truffle debug 0x5daa3a9569532f628599043320efcf46eb6d71086e9aa150f0a42704255b01b4 --network ropsten. However I am getting this error:

✔ Fetching solc version list from solc-bin. Attempt #1
> Everything is up to date, there is nothing to compile.

Error: The network id specified in the truffle config (3) does not match the one returned by the network (1).  Ensure that both the network and the provider are properly configured.
    at Object.detectAndSetNetworkId (/usr/local/lib/node_modules/truffle/build/webpack:/packages/environment/environment.js:110:1)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at Object.detect (/usr/local/lib/node_modules/truffle/build/webpack:/packages/environment/environment.js:24:1)
    at Object.run (/usr/local/lib/node_modules/truffle/build/webpack:/packages/core/lib/commands/migrate.js:201:1)
    at Command.run (/usr/local/lib/node_modules/truffle/build/webpack:/packages/core/lib/command.js:167:1)
Truffle v5.4.0 (core: 5.4.0)
Node v14.17.3

I check web3 to see if I can pass "network id" when I call the "send" on the method, but there is nothing. Here is the documentation.There are only 4 options for sending request.

https://web3js.readthedocs.io/en/v1.2.11/web3-eth-contract.html#id37