Uncaught TypeError: Cannot read properties of undefined (reading 'chain_id') when using useChains

[steezeburger]

I'm experiencing an error when using useChains.

useChains.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'chain_id')
    at useChains.js:15:1
    at Array.map (<anonymous>)
    at useChains (useChains.js:15:1)
    at DepositCard (DepositCard.tsx:71:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)

My code:

// line that throws the error. defined in a component that exists within `ChainProvider`
const chains = useChains(['cosmoshub']);

// Top level App component where I setup `ChainProvider`.
import type React from "react";
import { Route, Routes } from "react-router-dom";
import { ChainProvider } from "@cosmos-kit/react";
import { assets } from "chain-registry";
import { wallets } from "@cosmos-kit/keplr";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";

import {
  evmChainsToRainbowKitChains,
  ibcChainInfosToCosmosChains,
  useConfig,
} from "config";
import { NotificationsContextProvider } from "features/Notifications";
import BridgePage from "pages/BridgePage/BridgePage";
import Layout from "pages/Layout";

// global styles
import "styles/index.scss";
// contrib styles
import "@rainbow-me/rainbowkit/styles.css";
import "@interchain-ui/react/styles";
import { toCosmosChainNames } from "./config/chainConfigs/types.ts";

/**
 * App component with routes.
 * Sets up the RainbowKitProvider and QueryClientProvider for tanstack/react-query.
 */
export default function App(): React.ReactElement {
  const { evmChains, ibcChains } = useConfig();

  const rainbowKitConfig = getDefaultConfig({
    appName: "Flame Bridge",
    projectId: "YOUR_PROJECT_ID", // TODO
    chains: evmChainsToRainbowKitChains(evmChains),
  });

  const queryClient = new QueryClient();

  const cosmosWalletConnectOptions = {
    signClient: {
      projectId: "YOUR_PROJECT_ID", // TODO
    },
  };

  return (
    <NotificationsContextProvider>
      <WagmiProvider config={rainbowKitConfig}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitProvider>
            <ChainProvider
              chains={['cosmoshub']} // supported chains
              assetLists={assets} // supported asset lists
              wallets={wallets} // supported wallets
              walletConnectOptions={cosmosWalletConnectOptions} // required if `wallets` contains mobile wallets
            >
              <Routes>
                <Route element={<Layout />}>
                  <Route index element={<BridgePage />} />
                </Route>
              </Routes>
            </ChainProvider>
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </NotificationsContextProvider>
  );
}

Relevant code from cosmos-kit showing that repo.chainRecord.chain is what is undefined.
I'm following the simple example from the docs here.
useChain does not throw an error.

export function useChains(chainNames, sync = true) {
    const names = Array.from(new Set(chainNames));
    const context = useContext(walletContext);
    if (!context) {
        throw new Error('You have forgotten to use ChainProvider.');
    }
    const { walletManager, modalProvided } = context;
    if (!modalProvided) {
        throw new Error('You have to provide `walletModal` to use `useChains`, or use `useChainWallet` instead.');
    }
    const repos = names.map(name => walletManager.getWalletRepo(name));
    const ids = repos.map(repo => repo.chainRecord.chain.chain_id);  // throws error here
    
    //    ...
}