Share states between two RecoilRoots

[ImperialFist]

Hello everyone!
In my project, i'm using "react-three/fiber" which is required to store all content inside "Canvas". Also, for storing some states and share it with other modules in "Canvas" i'm using recoil's atom.

So, inside "RecoilRoot" everything works great, BUT i need to show data from atom in the "UI" component.

I can't put "RecoilRoot" out of "Canvas", so i tried to add a second "RecoilRoot". It kinda does the trick (now i can use "useRecoilValue" in "UI"), but it shows only default state of atom...

Here is how my "App.js" looks like:

function App() {


  return (

      <Suspense fallback={<Loading />}>
{/*Second RecoilRoot, outside the Canvas*/}
           <RecoilRoot>
            <Canvas shadows>
            <GameSettingsProvider>
{/*Main RecoilRoot with data*/}
              <RecoilRoot>
                <ObjectShow />
{/*Main RecoilRoot with data*/}
              </RecoilRoot>
              </GameSettingsProvider>
            </Canvas>
            <UI />
{/*Second RecoilRoot, outside the Canvas*/}
          </RecoilRoot>
      </Suspense>

  );
}

export default App;

Atom with data:

import {atom} from "recoil";
export const scoreState = atom({
    key: "score", // unique ID (with respect to other atoms/selectors)
    default: 0, // default value (aka initial value)
  });

UI module:

import React from 'react'
import { useRecoilValue } from 'recoil'
import { scoreState } from './gameState'


function UI() {

const score = useRecoilValue(scoreState);
  return (
    <div className='score-title'>
        <h1 className='score-title__text'>
            Score: {score}
        </h1>
      
    </div>
  )
}

export default UI

So, how can i use atom values outside "RecoilRoot" or, at least, share from nested one?