Hello, I have problem with understanding how to use providers around the entrypoint. I ignored this issue and wrapped them around /pages components and they worked fine. But now it came to haunt me and I need to fix this. I attached the file structure.

This is my _app.tsx:

export default function MyApp({Component, pageProps}: any) {
  const getLayout = Component.getLayout || (
    (page: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | null | undefined) => (
      <RootLayout>{page}</RootLayout>
    )
  )

  return getLayout(<Component {...pageProps} />)
}

Whenever I use it like this

<RootLayout>
  <Provider>
    {page}
  </Provider>
</RootLayout>

The provider just doesn't work. It doesn't register in the structure.

How do I go about this?