WagamiConfig Component Cannot read properties of undefined (reading 'queryClient')

I have been trying to add web3modal to my react app however there is an error while running the app in the browser.

import { Web3Modal } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { polygonMumbai } from 'wagmi/chains'

import {Routes, Route} from "react-router-dom";
import Main from './Pages/Main';
import MarketPlace from './Pages/MarketPlace.js';
import CreatePost from './Pages/CreatePost';
import Post from './Pages/Post';
import Login from './Pages/Login';

function App() {



const chains = [polygonMumbai]
const projectId = 'id'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, version: 1, chains }),
  publicClient
})

const ethereumClient = new EthereumClient(wagmiConfig, chains)

return (
    <>
    <WagmiConfig client={wagmiConfig}>
        <Routes>
          <Route path='/login' element={<Login type="login"/>}/>
          <Route path='/signup' element={<Login type="signup"/>}/>
          <Route path='/' element={<Post/>}/>
          <Route path='/marketPlace' element={<MarketPlace/>}/>
          <Route path='/createPost' element={<CreatePost/>}></Route>
          <Route path='/myaccount' element={<></>}/>
          <Route path='/topposts' element={<Main type="top"/>}/>
          <Route path='/technical' element={<Main type="technical"/>}/>
          <Route path='/indicators' element={<></>}/>
          <Route path='/news' element={<Main type="news"/>}/>
        </Routes>
    </WagmiConfig>
    <Web3Modal projectId={projectId} ethereumClient={ethereumClient}/>
    </>
  )
  
}

export default App;

This is the main App component

And this is the login component that allows wallet login

import './login.css';
import { useEffect, useState } from 'react';
import {connectWallet} from '../contractModel';
import { Web3Button } from '@web3modal/react'
import { useAccount, useDisconnect, useSigner } from 'wagmi';
import { ethers } from 'ethers';

function Login(){

    let innerWidth = window.innerWidth;
    useEffect(()=>{});
    
    

    if(innerWidth>600){
        return(
            <div className='login'>
                <p className='logo'>FlashFeed</p>
                <div className='loginBody'>
                <Web3Button/>
                </div>
            </div>
            
        );
    }
    else{
      return(
        <div>

        </div>
      )
    }

}

export default Login;

And I everytime I get this error

I have tried looking it up but no related results, I am using the newest version of react and the react router dom as the routing

kindly change your client={wagmiConfig} to to config={wagmiConfig}

I dont know if you figured this out already but you need to pass in the config prop to WagmiConfig -- with the latest wagmi version (version ^1), the prop name is no longer called client

tl;dr

...
function App() {
...
 return (
   <>
     <WagmiConfig config={wagmiConfig}>
      ...
     </WagmiConfig>
   </>
 )
}

here are the docs for this: https://wagmi.sh/react/WagmiConfig

i don't know what cause that problem but you should placed

const chains = [polygonMumbai]
const projectId = 'id'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, version: 1, chains }),
  publicClient
})

const ethereumClient = new EthereumClient(wagmiConfig, chains)

outside function App() and change the version: 1 into version: 2, as version 1 is not available soon. And i don't see any queryCLient, because it's the one causing problem.