conflicting between metamask and coinbase wallet

Question

export default function Home() {
  const connectMetamask = async () => {
    if (typeof window.ethereum !== "undefined") {
      let walletProvider = window.ethereum.providers.find((x) => x.isMetaMask);
      walletProvider.request({ method: "eth_requestAccounts" });
    }
  };
  const connectBlockWallet = async () => {
    if (typeof window.ethereum !== "undefined") {
      let walletProvider = window.ethereum.providers.find(
        (x) => x.isCoinbaseWallet
      );
      walletProvider.request({ method: "eth_requestAccounts" });
    }
  };

  function metaMask() {
    return (
      <>
        <button
          onClick={() => {
            connectMetamask();
          }}
        >
          connect to metaMask
        </button>
      </>
    );
  }

  function coinWallet() {
    return (
      <>
        <button
          onClick={() => {
            connectBlockWallet();
          }}
        >
          connect to coinbase
        </button>
      </>
    );
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {metaMask()}
      {coinWallet()}
    </div>
  );
}

I don't know why it is not working, issue is like window.ethereum.providers is undefined. I think window.ethereum should return array of provider. I have gone through lots solution but it doesnt work my case.I dont want to implement Web3Modal cause i dont want to wallet in popup form.