React/NextJS - useEffect(on load) runs 2 times

Question

I have a problem. My useEffect in PageWrapper component that is wrapping the whole app, runs 2 times:

      <PageWrapper>
        <Toaster position="top-right" reverseOrder={true} />
        <Component {...pageProps} />
      </PageWrapper>

PageWrapper component:

import Cookies from "js-cookie"

import { useMutation } from "@apollo/client"
import { useEffect } from "react"
import { GET_WALLET } from "../GraphQL/Wallet"
import { useRouter } from "next/router"

export const PageWrapper = ({ children }) => {
  const router = useRouter()
  const [getWallet] = useMutation(GET_WALLET)

  const checkIfAuth = async () => {
    try {
      const token = Cookies.get("token")

      if (!token) {
        return
      }

      const req = await getWallet({
        variables: {
          token: token,
        },
      })

      if (req.data.getWallet.success === true) {
        if (router.pathname === "/") {
          return router.push("/chat")
        }
        return
      }
      if (req.data.getWallet.success === false) {
        if (router.pathname === "/chat") {
          return router.push("/")
        }
        return
      }
    } catch (error) {
      console.error(error.message)
    }
  }

  useEffect(() => {
    checkIfAuth()
  }, [])

  return <>{children}</>
}

I tried to write the function inside the useEffect but I wasn't able to because the function needs to be asynchronous .

Fixed the issue:

By disabling `reactStrictMode` in `next.config.js`