Unable to use React Context in deep descendant components

Question

I am trying to use global state in my React app using React Context and the useReducer hook. When I try to access state using my useStateContext hook in distant descendants, I get back undefined. To preface, I am also using react-three-fiber as well where I am getting my context error.

App.js

const App = () => {
  return (
      <GameProvider>
        <AppState />
      </GameProvider>
  );
};

const AppState = () => {
  const state = useStateContext() // this works. Direct child of Provider
  return <Game />
}

const Game = () => {
  const state = useStateContext(); // this works. 2nd descendant of Provider
  return <Scene/>
};

const Scene = () => {
  const state = useStateContext(); // this works. 3rd descendant
  return (
    <div id={styles.scene}>
      <Canvas >
        <OrbitControls minDistance={9} maxDistance={9} />
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 15, 10]} angle={0.3} />
        <Cube
          size={5}
          position={[0, 0, 0]}
        />
      </Canvas>
    </div>
  );
};

const Cube = () => {
  const state = useStateContext(); // returns undefined. What gives?
  return <group></group>
}

StateContext.js

import React, { useContext, createContext, useReducer } from 'react'
import reducer from './reducer';

const StateContext = createContext();
const DispatchContext = createContext();

export const useDispatchContext = () => useContext(DispatchContext)
export const useStateContext = () => useContext(StateContext);

const initialState = {
     test: 1
}

export const GameProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState)

    return (
        <DispatchContext.Provider value={dispatch}>
            <StateContext.Provider
                value={state}
            >
                {children}
            </StateContext.Provider>
        </DispatchContext.Provider>
    )
}

I wanted to use Context since I figured I could get the state in any descendant of my application. I've tried checking the react docs about this issue but to no avail.

EDIT:

Also I think it might be important to mention that I am using react-three-fiber which is wrapping my Cube component in a Canvas .

Answer 1

Turns out this is a pretty common issue with using the React Context api with react-three-fiber . Through the documentation I decided to use react-three-drei 's useContextBridge since I was already using the package. Found the documentation here for my solution

const ContextBridge = useContextBridge(StateContext, DispatchContext)
  return (
    <div id={styles.scene}>
      <Canvas >
        <OrbitControls minDistance={9} maxDistance={9} />
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 15, 10]} angle={0.3} />
        <spotLight position={[10, -15, -30]} angle={0.3} />
        <ContextBridge>
          <Cube
            size={5}
            position={[0, 0, 0]}
          />
        </ContextBridge>
      </Canvas>
    </div>
  );