How to fix "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')"

Question

So I am using ChakraUI and React JS to make a project. Whenever I start the project it gives me the error, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')".
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

import React from "react";
import { MenuItems } from "./MenuItems";
import "./navbar.css";

function Navbar() {
  return (
    <>
      <nav className='NavbarItems'>
        <h1 className='navbar-logo'></h1>
        <div className='menu-icon'></div>
        <ul>
          {MenuItems.map((item, index) => {
            return (
              <li key={index}>
                <a className={item.cname} href={item.url}>
                  {item.title}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

Navbar CSS file

.NavbarItems {
  height: 80px;
  display: flex;
  justify-content: center;
}

App.js file

import { ChakraProvider } from "@chakra-ui/provider";
import Navbar from "./components/navbar";
function App() {
  return (
    <ChakraProvider>
      <Navbar />
    </ChakraProvider>
  );
}

export default App;

Answer 1

Once I used extendTheme instead of an object for theme the error was gone. https://chakra-ui.com/docs/theming/customize-theme