How to store global state with providers?

[SzabKel]

I would like to maintain a global state for the application, which sometimes should be read in a child components. Things like: App initialization happened or not. Are we in dark or light mode. Which authentication provider was used. Current themes selected. User claims...etc.
In order to store such things, I created and exported atoms for them. After app initialization they are mostly set.
This works without a provider or a scope until I decide to reuse a component which uses one of the global states. If I use a provider for a child component, the global state value is not visible for them (only the default value).
My first guess was to create a global scope and use all of the global atoms with that scope explicitly, which in theory should work.

export const globalAtom = atom<string>('Default value.');
export const globalScope = 'global'; //Symbol('Provides scope for global `values.');
...
<div>
  <Provider scope={globalScope}>
	<p>Global provider value: {global}</p>
	<p>Counter with provider 1 scope:</p>
	<Provider scope={provider1Scope}>
	  <Counter />
	</Provider>
	<br />
	<p>Counter with provider, without scope:</p>
	<Provider>
	  <Counter />
	</Provider>
	<br />
	<p>Counter without provider:</p>
	<Counter />
  </Provider>
</div>

However, when I created a demo for this, I could not create a Scope variable (string, number or Symbol) and export it. The child component importing and using the scope value still only can read the default value of the global atom.

import { globalAtom, globalScope } from './Hello';

const countAtom = atom(0);

export const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  const [global] = useAtom(globalAtom, globalScope);
  const inc = () => setCount((c) => c + 1);
  return (
    <div>
      {count} <button onClick={inc}>+1</button>{' '}
      <i>Counter reads global: {global}</i>
    </div>
  );
};

The only thing that worked for me is using strings everywhere instead of exported Symbol or string variables.
Intead of <Provider scope={globalScope}> and const [global] = useAtom(globalAtom, globalScope); I use <Provider scope={'global'}> and const [global] = useAtom(globalAtom, 'global');
I also noticed that almost all of the provider/scope examples I found were using a single file, which avoids exporting them.

Is this intended for jotai or am I supposed to store the Scope values some other way? My mistake, had nothing to do with it. Ignore.

Stackblitz

First try: https://stackblitz.com/edit/react-ts-x6dfq5

Fixed, single file example: https://stackblitz.com/edit/react-ts-ddqoms?file=Hello.tsx**

[SzabKel]

The first example did not work, because I set the global value where I declared the Provider with the scope. I needed to create a new parent component, declare the Provider there and only set the values in child components.

Fixed, single file example: https://stackblitz.com/edit/react-ts-ddqoms?file=Hello.tsx