Multiple Web3Modal buttons

App.js

import { useState } from "react";
import { VStack, Button, HStack } from "@chakra-ui/react";
import { metamaskModal, coinbaseWalletModal, otherModal } from "./modals"; // import Web3Modals

export default function Home() {
  // State variables
  const [provider, setProvider] = useState();
  const [modal, setModal] = useState();

  // Connect to wallet given a wallet type
  const connectWallet = async (wallet) => {
    try {
      // Determine appropriate Web3Modal
      let modal;
      if (wallet === "metamask") {
        modal = metamaskModal;
      } else if (wallet === "coinbaseWallet") {
        modal = coinbaseWalletModal;
      } else {
        modal = otherModal;
      }
      // Connect to wallet
      const provider = await modal.connect();
      // Store modal and provider state
      setModal(modal);
      setProvider(provider);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <VStack justifyContent="center" alignItems="center" h="100vh">
        <HStack>
          <VStack>
            <Button onClick={() => connectWallet("metamask")}>Metamask</Button>
            <Button onClick={() => connectWallet("coinbaseWallet")}>Coinbase Wallet</Button>
            <Button onClick={() => connectWallet("otherWallet")}>Web3Modal</Button>
          </VStack>
        </HStack>
      </VStack>
    </>
  );
}