title: How to fix "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')"
body: <p>So I am using ChakraUI and React JS to make a project. Whenever I start the project it gives me the error, &quot;TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')&quot;. <br>
  I didn't edit any global theme or anything in chakra. I just started making the navbar, designed with CSS. And when I try to run it, it shows me the error.
  here is my navbar component</p>
  <pre><code>import React from &quot;react&quot;;
  import { MenuItems } from &quot;./MenuItems&quot;;
  import &quot;./navbar.css&quot;;
  
  function Navbar() {
    return (
      &lt;&gt;
        &lt;nav className='NavbarItems'&gt;
          &lt;h1 className='navbar-logo'&gt;&lt;/h1&gt;
          &lt;div className='menu-icon'&gt;&lt;/div&gt;
          &lt;ul&gt;
            {MenuItems.map((item, index) =&gt; {
              return (
                &lt;li key={index}&gt;
                  &lt;a className={item.cname} href={item.url}&gt;
                    {item.title}
                  &lt;/a&gt;
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/&gt;
    );
  }
  
  export default Navbar;
  </code></pre>
  <p>Navbar CSS file</p>
  <pre><code>.NavbarItems {
    height: 80px;
    display: flex;
    justify-content: center;
  }
  </code></pre>
  <p>App.js file</p>
  <pre><code>import { ChakraProvider } from &quot;@chakra-ui/provider&quot;;
  import Navbar from &quot;./components/navbar&quot;;
  function App() {
    return (
      &lt;ChakraProvider&gt;
        &lt;Navbar /&gt;
      &lt;/ChakraProvider&gt;
    );
  }
  
  export default App;
  </code></pre>