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;