MeshJs integration With Next 13 Error: Element type is invalid. Received a promise that resolves to: [object Promise]

Question

I am trying to create a connect button to the Nami Wallet where the user can register so I can take the public address, network id, and so on as I need it for the backend.

To implement the Nami wallet connection I am using MeshJs. I followed the documentation but when I use the MeshProvider component I get this error: Error: Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.

I'm currently utilizing Next.js 13 in my project, and I've organized my providers in a separate file. Given that I'm also using Redux and Redux Persist, this is where I integrate the MeshProvider.

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <MeshProvider>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          {children}
        </PersistGate>
      </Provider>
    </MeshProvider>
  );
};

This component is used inside the main layout.tsx.

Am I encountering the error due to placing the component in the wrong file? I attempted to use it within the main layout.tsx, but it seems the MeshProvider relies on useEffect and requires placement within a use-client component."