ChakraUi/nodejs undefined (reading ‘_config’)

I am new to the chakraUi, I have installed latest npm and chakraUi version. Whenver I try to run my code it gives me this error

Uncaught TypeError: Cannot read properties of undefined (reading ‘_config’)
at ChakraProvider (provider.js:15:10)
at renderWithHooks (react-dom.development.js:15486:18)
at mountIndeterminateComponent (react-dom.development.js:20103:13)
at beginWork (react-dom.development.js:21626:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27490:7)
at performUnitOfWork (react-dom.development.js:26596:12)
at workLoopSync (react-dom.development.js:26505:5)`

> *`*
> Here is my code:``>
> main.jsx
> import React from 'react';
> import ReactDOM from 'react-dom/client';
> import { BrowserRouter } from 'react-router-dom';
> import App from './App.jsx';
> import { ChakraProvider } from '@chakra-ui/react';
> 
> Create the root element to render the React application
> const root = ReactDOM.createRoot(document.getElementById('root'));
> 
> root.render(
>   <React.StrictMode>
>     <BrowserRouter>
>     <ChakraProvider>
>       <App />
>     </ChakraProvider>
>     </BrowserRouter>
>   </React.StrictMode>
> );`
> 
> //
> //App.jsx 
>     `
> 
> ```
> function App() {
> 
> return (
>             <>
>         <h1> Hi</h1>
> 
>       );
> 
> 
> `>

Any leads will be greatly appericiated!!!