Lesson 10 : useMoralis() returning chainIdHex as null

[eik-1]

When I console.log my chainIdHex it is returning me "null"

LotteryEntrance.jsx

import { useWeb3Contract, useMoralis } from "react-moralis"
import { abi, contractAddress } from "../constants/index.js"
import { useEffect, useState } from "react"

export default function LotteryEnterance() {
    const { chainId: chainIdHex, isWeb3Enabled } = useMoralis()
    const chainId = parseInt(chainIdHex)

    const [fee, setFee] = useState(0)

    const raffleAddress = chainId in contractAddress ? contractAddress[chainId][0] : null

    //runContractFunction can both send transactions and read states
    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
        msgValue: fee,
    })

    const { runContractFunction: getEnteranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getEnteranceFee",
        params: {},
    })

    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const fee = await getEnteranceFee()
                console.log(fee)
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return <div>Hi from Eik</div>
}

_app.js

import "@rainbow-me/rainbowkit/styles.css"
import { MoralisProvider } from "react-moralis"

import { getDefaultWallets, RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit"
import { configureChains, createConfig, WagmiConfig } from "wagmi"
import { mainnet, sepolia, polygon, optimism, arbitrum } from "wagmi/chains"
import { alchemyProvider } from "wagmi/providers/alchemy"
import { publicProvider } from "wagmi/providers/public"
import "dotenv/config"

const { chains, publicClient } = configureChains(
    [mainnet, sepolia, polygon, optimism, arbitrum],
    [alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_ID }), publicProvider()]
)

const { connectors } = getDefaultWallets({
    appName: "Eik's Raffle",
    projectId: "bf8479709d97c9f077e3759ffa6fbe74",
    chains,
})

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors,
    publicClient,
})

export default function App({ Component, pageProps }) {
    return (
        <WagmiConfig config={wagmiConfig}>
            <RainbowKitProvider
                theme={darkTheme({
                    borderRadius: "medium",
                    overlayBlur: "small",
                })}
                chains={chains}
            >
                <MoralisProvider initializeOnMount={false}>
                    <Component {...pageProps} />
                </MoralisProvider>
            </RainbowKitProvider>
        </WagmiConfig>
    )
}

[eik-1]

Since nobody answered I had to find the solution myself. Took me 1.5 weeks but got the correct chainId.
If anyone needs the answer reply to this and i'll send

[Ebenezary]

I need help here. Thanks

[vasanthakumar-23]

hi brother,did u installed wsl in ur system,is that necessary