Cannot connect to MetaMask after upgrading web3 from 1.x to 4.x due to "setProvider is not a function" error

Question

The following code worked fine until I decided to upgrade the two following dependencies from 1.7.5 versions to the latest: "web3": "^4.1.1", "web3-eth-contract": "^4.0.5"

After the update, when I use my app to connect to metamask I get TypeError: "web3_eth_contract__WEBPACK_IMPORTED_MODULE_0__.default.setProvider is not a function"

The line where the error points to: Web3EthContract.setProvider(ethereum);

import Web3EthContract from "web3-eth-contract";
import Web3 from "web3";
import MyContractABI from "../../contracts/0_ganache_EVAULT_2023.json";
import { fetchData } from "../data/dataActions";

const connectRequest = () => {
  return {
    type: "CONNECTION_REQUEST",
  };
};

const connectSuccess = (payload) => {
  return {
    type: "CONNECTION_SUCCESS",
    payload: payload,
  };
};

const connectFailed = (payload) => {
  return {
    type: "CONNECTION_FAILED",
    payload: payload,
  };
};

const updateAccountRequest = (payload) => {
  return {
    type: "UPDATE_ACCOUNT",
    payload: payload,
  };
};

export const connect = () => {
  return async (dispatch) => {
    dispatch(connectRequest());
    const { ethereum } = window;
    const metamaskIsInstalled = ethereum && ethereum.isMetaMask;
    await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    if (metamaskIsInstalled) {
     // In the next line the code shows the following error:
     // TypeError: web3_eth_contract__WEBPACK_IMPORTED_MODULE_0__.default.setProvider is not a function
      Web3EthContract.setProvider(ethereum);
      let web3 = new Web3(ethereum);
      try {
        const accounts = await ethereum.request({
          method: "eth_requestAccounts",
        });
        const networkId = await ethereum.request({
          method: "net_version",
        });
        if (networkId == 679420) { // this is a local ganache testing net ID
          const myContract = new Web3EthContract( MyContractABI, "0x3d7Eec9C41c7A99489fD27e6B087f9C827b16d3F"); 
          dispatch(
            connectSuccess({
              account: accounts[0],
              _myContract: myContract,      
              web3: web3,
            })
          );
          ethereum.on("accountsChanged", (accounts) => {
              window.location.reload();
          });
          ethereum.on("chainChanged", () => {
            window.location.reload();
          });
        } else {
          dispatch(connectFailed("Change Metamask Network to Polygon and Connect again!"));
        }
      } catch (err) {
        dispatch(connectFailed("Could not connect to Polygon Network. Check MetaMask settings."));
        console.log(err);
      }
    } else {
      dispatch(connectFailed("Please install Metamask to your browser extensions, and try again!"));
    }
  };
};
export const updateAccount = (account) => {
  return async (dispatch) => {
    dispatch(updateAccountRequest({ account: account }));
    dispatch(fetchData(account));
  };
};

I tried looking at the latest official syntax here: "How to use the web3-eth-contract.setProvider function in web3-eth-contract" snyk.io/advisor/npm-package/web3-eth-contract

I also looked at the official breaking changes list here: docs.web3js.org/guides/web3_upgrade_guide

I cannot see what I am doing wrong, the latest examples seem to use the exact same syntax, but honestly I do not understand web3 code well enough yet. If I revert to 1.75 versions of the above dependencies, my dapp connects to metamask and works fine. I have no specific reason to want to upgrade from version 1.75, I simply wanted to perhaps futureproof my dapp.