Can’t detect MetaMask with wagmi & walletConnect v2

My currect react dApp implementation with wagmi and walletConnect will show the modal, but won’t detect the installed MetaMask extension, except for the green marked entry:

When I click on the second-entry, I get this (although MetaMask is actually installed and ready)

The other items in the modal won’t trigger or even find the installed MetaMask extension.

My App.js currently is:

import {connect} from "react-redux";
import {BrowserRouter, Route} from "react-router-dom";
import {WagmiConfig, createConfig, configureChains} from 'wagmi'
import {Web3Modal} from "@web3modal/react";
import {MetaMaskConnector} from 'wagmi/connectors/metaMask'
import {createWeb3Modal} from '@web3modal/wagmi/react'
import customWagmiChains from "./customWagmiChains";
import {polygonMumbai} from '@wagmi/core/chains'
import {infuraProvider} from 'wagmi/providers/infura';
import {EthereumClient, w3mConnectors, w3mProvider} from "@web3modal/ethereum";
import {jsonRpcProvider} from "@wagmi/core/providers/jsonRpc";
import {WalletConnectConnector} from 'wagmi/connectors/walletConnect'
import Logger from "js-logger";
import Overview from "./pages/Overview";
import appConfig from "./appConfig";
import "./styles/base.scss";

// Wagmi client
const {chains, publicClient} = configureChains(
    [polygonMumbai],
    [
        infuraProvider({apiKey: appConfig.Infura_APIKey}),
        /*
        jsonRpcProvider({
            rpc: (chain) => ({
                http: customWagmiChains.getNetwork().rpcUrls.default
            }),
            }),
        w3mProvider({projectId: appConfig.WalletConnect_ProjectID})
         */
    ]
);

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: [
        new MetaMaskConnector({chains}),
        new WalletConnectConnector({
            chains,
            options: {
                projectId: appConfig.WalletConnect_ProjectID,
                showQrModal: false
            }}),
    ],
    publicClient
})

// Web3Modal Ethereum Client
createWeb3Modal(
    {
        wagmiConfig: wagmiConfig,
        projectId: appConfig.WalletConnect_ProjectID,
        chains: chains
    });


function App(props) {
    // Setup logger
    Logger.useDefaults();
    Logger.setLevel(Logger.DEBUG);

    return (
        <>
            <WagmiConfig config={wagmiConfig}>
                <BrowserRouter>
                    <Route exact path={"/"} component={Overview}/>
                </BrowserRouter>
            </WagmiConfig>
        </>
    );
}

const mapStateToProps = (state) => {
    return {}
}

const mapDispatchToProps = dispatch => {
    return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

How can I make all items in the modal find & communicate the installed MetaMask extension in the browser?