WalletBalance.tsx Token Balance Returns : undefined

I've been completing the full-stack-defi course and when I use the useTokenBalance function from usedapp/core I get returned nothing, I don't know where I've went wrong because I've when I console.log the address and the account variables it returns with the correct account address and the correct token address.

Here's the typescript here:

import {useEthers, useTokenBalance} from "@usedapp/core"
import {formatUnits} from "@ethersproject/units"

export interface WalletBalanceProps {
    token: Token
}

export const WalletBalance = ({token}: WalletBalanceProps) => {
    const {image, address, name} = token
    const {account} = useEthers()
    console.log(account)
    console.log(address)
    const tokenBalance = useTokenBalance(address, account)
    const formattedTokenBalance: number = tokenBalance ? parseFloat(formatUnits(tokenBalance, 18)) : 0
    console.log(tokenBalance?.toString())
    return (<div>{formattedTokenBalance}</div>)
}

I thought this could be an error with @usedapp/core but I reinstalled @usedapp/core and I'm still getting the same error returned. Any help would be useful :)

You should try to change the config settings in App.tsx

import { DAppProvider, Config, Kovan } from "@usedapp/core"
import { Header } from "./components/Header";
import Container from "@mui/material/Container"
import { Main } from "./components/Main";
import { getDefaultProvider } from 'ethers'


const config: Config = {
  readOnlyChainId: Kovan.chainId,
  readOnlyUrls: {
    [Kovan.chainId]: getDefaultProvider('kovan'),
  },
}

function App() {
  return (
    <DAppProvider config={config} >
      <Header></Header>
      <Container maxWidth="md">
        <div className="App">
          <Main />
        </div>
      </Container>
    </DAppProvider>
  );
}

export default App;