Redux devtools displaying only one of the two stores' states when it's used with Next.js. Any solution?

[algoORgoal]

Description

<AuthStoreProvider>
    <BoothStoreProvider>
              
    </BoothStoreProvider>
</AuthStoreProvider>

• I followed the official docs on how to set up zustand with next.js. There are two stores created in the same way.
• When I check the redux devtools, I could only see only of the two store states. Is this behavior intentional? I would like to check both stores at the same time.

When <BoothStoreProvider/> is wrapping around <AuthStoreProvider/>

<BoothStoreProvider>
  <AuthStoreProvider>
    <div className="mx-auto flex min-h-screen flex-col items-stretch justify-start sm:w-[640px]">
      <Header />
      <div className="flex flex-auto flex-col items-stretch justify-start px-5">
        {children}
      </div>
    </div>
  </AuthStoreProvider>
</BoothStoreProvider>

Result

Only the state provided by <BoothStoreProvider/> is shown.

When <AuthStoreProvider/> is wrapping around <BoothStoreProvider/>

<AuthStoreProvider>
  <BoothStoreProvider>
    <div className="mx-auto flex min-h-screen flex-col items-stretch justify-start sm:w-[640px]">
      <Header />
      <div className="flex flex-auto flex-col items-stretch justify-start px-5">
        {children}
      </div>
    </div>
 </BoothStoreProvider>
</AuthStoreProvider>

Result

Only the state provided by <AuthStoreProvider/> is shown.

[dbritto-dev]

@algoORgoal would you mind sharing us a minimal repro on stackblitz?

[algoORgoal]

@dbritto-dev Thank you for trying to help, but I found out at the moment.
For someone who is new to devtools like me: If you click instance right next to your website title, there should be the rest of the state you defined!