Issue with localhost provider

[naushad2403]

Describe the bug
Using hardhat local node and metamask, Configuring Wagmi client with jsonRpcProvider,
Error I am getting is networkConfigurationId undefined does not match a configured networkConfiguration
To Reproduce
Steps to reproduce the behavior:

1. Replace the content of _app.js of frontend folder with the following code.
2. Run npx hardhat node in backend folder
3. Run npx run dev in frontend folder
4. Select localhost network in metamask
5. Try to connect with connect

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createClient, useAccount, WagmiConfig } from "wagmi";
import {
  localhost,
} from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import MainLayout from "../layout/mainLayout";
import { useRouter } from "next/router";
import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc";

const { chains, provider } = configureChains(
  [
    localhost
  ],
  [
    jsonRpcProvider({
      rpc: (chain) => ({
        http: `http://127.0.0.1:8545/`,
      }),
    }),
  ]
);

console.log(chains, provider);

const { connectors } = getDefaultWallets({
  appName: "My Alchemy DApp",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

export { WagmiConfig, RainbowKitProvider };

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const account = useAccount({
    onConnect({ address, connector, isReconnected }) {
      console.log(address);
      if (!isReconnected) router.reload();
    },
  });
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider
        modalSize="compact"
        initialChain={process.env.NEXT_PUBLIC_DEFAULT_CHAIN}
        chains={chains}
      >
        <MainLayout>
          <Component {...pageProps} />
        </MainLayout>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

Expected behavior
App should connect with wallet and show address.

Screenshots

Desktop (please complete the following information):

• OS: MacOS ventura 13.4
• Browser Charome

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.