title: Why useContext return undefined?
body: <p>I have an issue that is useContext return <code>undefined</code> value.</p>
  <p>I create a context for collapsing menu like toggle menu. Afterward I added provider into index file to wrap Main component. I go to Main file import <code>CollapseContext</code> but this is file it's not work :( ?</p>
  <p>I don't understand why it return <code>undefined</code>.</p>
  <p>Below is my code.</p>
  <p>src/context/CollapseMenuContext.js</p>
  <pre><code>import React, { createContext, useState } from 'react'
  
  export const CollapseContext = createContext()
  
  export default function CollapseProvider({ children }) {
    const [isCollapse, setIsCollapse] = useState(false)
  
    const toggleCollapse = () =&gt; {
      setIsCollapse(!isCollapse)
    }
  
    const values = {
      isCollapse,
      toggleCollapse,
    }
  
    return &lt;CollapseContext.Provider value={values}&gt;{children}&lt;/CollapseContext.Provider&gt;
  }
  </code></pre>
  <p>src/app/index.jsx</p>
  <pre><code>import React from 'react'
  import Header from '_components/Header'
  import CollapseProvider from '../context/CollapseMenuContext.js'
  import MainDigistallDesktop from './Main'
  
  function DigistallDesktop() {
    return (
      &lt;CollapseProvider&gt;
        &lt;Header /&gt;
        &lt;section className='section-content section-content--top mains-screen pb-0' id='checkHeight'&gt;
          &lt;MainDigistallDesktop /&gt;
        &lt;/section&gt;
      &lt;/CollapseProvider&gt;
    )
  }
  
  export default DigistallDesktop
  </code></pre>
  <p>src/app/Main.jsx</p>
  <pre><code>import React, { useContext } from 'react'
  import { Route, Switch } from 'react-router-dom'
  import OrderRecord from './OrderRecord'
  import Sidebar from './components/Sidebar/index'
  import Dashboard from './Dashboard'
  import Delivery from './Delivery'
  import Products from './Products'
  import Setting from './Setting'
  import { CollapseContext } from '../context/CollapseMenuContext.js'
  
  function MainDigistallDesktop() {
    const context = useContext(CollapseContext)
    console.info(context)
    return (
      &lt;div className='container-fluid' style={{ minWidth: '1200px' }}&gt;
        &lt;div className='row'&gt;
          {/* &lt;div className={`${isCollapse ? 'col-1' : 'col-2'} position-relative`}&gt;
            &lt;Sidebar /&gt;
          &lt;/div&gt; */}
          &lt;div className='col-10 mx-auto'&gt;
            &lt;Switch&gt;
              &lt;Route path='/' exact component={Dashboard} /&gt;
              &lt;Route path='/order-records' exact component={OrderRecord} /&gt;
              &lt;Route path='/delivery' exact component={Delivery} /&gt;
              &lt;Route path='/products' exact component={Products} /&gt;
              &lt;Route path='/setting' exact component={Setting} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default MainDigistallDesktop
  </code></pre>
  <p>result:
  <a href="https://i.stack.imgur.com/2ZV3V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ZV3V.png" alt="enter image description here" /></a></p>
  <p>Eidt 1:
  This is root app file:</p>
  <pre><code>export default function App() {
    if (process.env.REACT_APP_ENVIRONMENT === 'production') useScript()
  
    return (
      &lt;Provider store={store}&gt;
        &lt;ToastProvider&gt;
          &lt;FirebaseContext.Provider value={{ firebase }}&gt;
            &lt;Router history={history}&gt;
              &lt;Switch&gt;
                &lt;Route path='/sign-in' exact={true} component={SignInPage} /&gt;
                &lt;Route path='/sign-up' exact={true} component={SignUpPage} /&gt;
                &lt;Route path='/reset-password' exact={true} component={ForgotPasswordPage} /&gt;
                &lt;Route path='/reset-password-with-code' component={ResetPasswordPage} /&gt;
                &lt;Route path='/info' exact={true} component={RedirectGoogleSites} /&gt;
                &lt;Route path='/policy' exact={true} component={Policy} /&gt;
                &lt;ProtectedRoute path='/welcome' exact={true} component={Welcome} /&gt;
                &lt;ProtectedRoute path='/digistall' component={Digistall} /&gt; --&gt; this is index.jsx file
                {/* &lt;ProtectedRoute path='/' component={MainPage} /&gt; */}
                &lt;ProtectedRoute path='/' component={MainDigistallDesktop} /&gt; --&gt; lead to my app current (Main.jsx)
              &lt;/Switch&gt;
            &lt;/Router&gt;
          &lt;/FirebaseContext.Provider&gt;
        &lt;/ToastProvider&gt;
      &lt;/Provider&gt;
    )
  }
  </code></pre>