How can I connect ThirdWebProvider to my local ganache network?

Question

So, currently I'm working on a project that use thirdweb library to implement inAppWallets in the web application. I have no current experience working with blockchain , so this is kinda like a research project.

In the main.tsx file is where I have configured the ThirdWebProvider, using 2 versions of ThirdWebProvider is done so to access hooks such as useSigner from previous versions of thirdweb library. it was done in a way they have mentioned in their migration document. https://portal.thirdweb.com/typescript/v5/migrate

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { ThirdwebProvider, Chain } from "@thirdweb-dev/react";

import { ThirdwebProvider as ThirdwebProviderV5 } from "thirdweb/react";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { WalletProvider } from "./components/shared/app-wallet-provider/app-wallet-provider";

import "./index.css";
import App from "./App.tsx";

const queryClient = new QueryClient();

console.log("Environment:", import.meta.env.MODE);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <ThirdwebProvider >
          <ThirdwebProviderV5>
            <WalletProvider>
              <App />
            </WalletProvider>
          </ThirdwebProviderV5>
        </ThirdwebProvider>
      </BrowserRouter>
    </QueryClientProvider>
  </StrictMode>
);

login.tsx

<ConnectButton
              client={client}
              wallets={wallets}
              connectButton={{
                label: "Login",
                style: { backgroundColor: "#f0595d", color: "white" },
              }}
              chain={chain}
            />

const chain = defineChain({
  id: 1337,
  rpc: "http://127.0.0.1:7545",
});

const wallets = [
    inAppWallet({
      auth: {
        options: ["email"],
        redirectUrl: "/dashboard",
      },
    }),
  ];

The issue that I'm facing is after login in to the application using my email, the wallet address showing up do not equal to any of the wallet addresses in my ganache server. When asked by chatgpt it suggested that it is due to the configuration of the thirdweb components. Your help is much appreciated !