Having issues adding chains and having it reflect when using useNetwork.

[mbuxmann]

Hi, I'm trying to add different chains (Binance and Avax) and want the user to be able to switch between them using the useNetwork hook. After I've added the chains I wish to use it doesn't reflect (it says unsupported). When I then console.log(data) I only see the default chains and the chains that I've added is nowhere to be found. Help will be much appreciated. Here is my code.

Codesandbox: link

const AVAX_TEST = "https://api.avax-test.network/ext/bc/C/rpc";

const testChains: Chain[] = [
  {
    id: 43113,
    name: "Avalanche FUIJI C-Chain",
    nativeCurrency: {
      name: "Avalanche",
      symbol: "AVAX",
      decimals: 18,
    },
    rpcUrls: ["https://api.avax-test.network/ext/bc/C/rpc"],
    blockExplorers: [
      {
        name: "Snowtrace",
        url: "https://testnet.snowtrace.io",
      },
    ],
    testnet: true,
  },
  {
    id: 97,
    name: "Smart Chain - Testnet",
    nativeCurrency: {
      name: "BNB Token",
      symbol: "BNB",
      decimals: 18,
    },
    rpcUrls: ["https://data-seed-prebsc-1-s1.binance.org:8545/"],
    blockExplorers: [
      {
        name: "bscscan",
        url: "https://testnet.bscscan.com",
      },
    ],
    testnet: true,
  },
];

const provider = new ethers.providers.JsonRpcProvider(AVAX_TEST);
const connectors = [new InjectedConnector({ chains: testChains })];

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <WagmiProvider provider={provider} connectors={connectors}>
        <Component {...pageProps} />
      </WagmiProvider>
    </ChakraProvider>
  );
}

and in my other file I just imported the useNetwork hook and console.log(data) and get the following:

{
    "chain": {
        "id": 97,
        "unsupported": true
    },
    "chains": [
        {
            "id": 1,
            "name": "Mainnet",
            "nativeCurrency": {
                "name": "Ether",
                "symbol": "ETH",
                "decimals": 18
            },
            "rpcUrls": [
                "https://mainnet.infura.io/v3"
            ],
            "blockExplorers": [
                {
                    "name": "Etherscan",
                    "url": "https://etherscan.io"
                }
            ]
        },
        {
            "id": 3,
            "name": "Ropsten",
            "nativeCurrency": {
                "name": "Ropsten Ether",
                "symbol": "ropETH",
                "decimals": 18
            },
            "rpcUrls": [
                "https://ropsten.infura.io/v3"
            ],
            "blockExplorers": [
                {
                    "name": "Etherscan",
                    "url": "https://ropsten.etherscan.io"
                }
            ],
            "testnet": true
        },
        {
            "id": 4,
            "name": "Rinkeby",
            "nativeCurrency": {
                "name": "Rinkeby Ether",
                "symbol": "rETH",
                "decimals": 18
            },
            "rpcUrls": [
                "https://rinkeby.infura.io/v3"
            ],
            "blockExplorers": [
                {
                    "name": "Etherscan",
                    "url": "https://rinkeby.etherscan.io"
                }
            ],
            "testnet": true
        },
        {
            "id": 5,
            "name": "Goerli",
            "nativeCurrency": {
                "name": "Goerli Ether",
                "symbol": "gETH",
                "decimals": 18
            },
            "rpcUrls": [
                "https://goerli.infura.io/v3"
            ],
            "blockExplorers": [
                {
                    "name": "Etherscan",
                    "url": "https://goerli.etherscan.io"
                }
            ],
            "testnet": true
        },
        {
            "id": 42,
            "name": "Kovan",
            "nativeCurrency": {
                "name": "Kovan Ether",
                "symbol": "kETH",
                "decimals": 18
            },
            "rpcUrls": [
                "https://kovan.infura.io/v3"
            ],
            "blockExplorers": [
                {
                    "name": "Etherscan",
                    "url": "https://kovan.etherscan.io"
                }
            ],
            "testnet": true
        }
    ]
}