NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider>

[CoderB01]

In the 17:01:13 of this course i keep getting this error:

NoMoralisContextProviderError: Make sure to only call useMoralis within a  <MoralisProvider>

on my browser.

This is my package.json file:

{
  "name": "nextjs-smartcontract-raffle-fcc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^2.18.4",
    "next": "13.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.3.5"
  },
  "devDependencies": {
    "@prettier/plugin-pug": "^2.4.2",
    "prettier": "^2.8.7"
  }
}

This is my _app.js file:

import "@/styles/globals.css"
import { MoralisProvider } from "react-moralis"

export default function App({ Component, pageProps }) {
    return (
        <MoralisProvider initializeOnMount={false}>
            <Component {...pageProps} />
        </MoralisProvider>
    )
}

And this is my ManualHeader.js file:

import { useMoralis } from "react-moralis"

export default function ManualHeader() {
    const { enableWeb3 } = useMoralis()

    return (
        <div>
            <button>Connect</button>
        </div>
    )
}

I have also tried installing react-moralis@latest too but i still got the error

I will appreciate help

[alymurtazamemon]

@CoderB01 Where have you called this ManualHeader.js file?