NextJs with ChakraUI v1.7.5 extendTheme - How to fix "Cannot read properties of undefined (reading 'useSystemColorMode')"

Question

I'm having error on my macbook of "Cannot read properties of undefined (reading 'useSystemColorMode')" with NextJs and chakra-ui v1.7.5 when using extendTheme

Here is my package.json file

"dependencies": {
    "@chakra-ui/icons": "^1.1.1",
    "@chakra-ui/react": "^1.7.5",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "framer-motion": "^5.6.0",
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },

src/theme/index.js. already tried spreading ...config, but issue still persists.

import { extendTheme, theme as base } from "@chakra-ui/react";

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = () =>
  extendTheme({
    config,
    fonts: {
      heading: `Montserrat, ${base.fonts?.heading}`,
      body: `Inter, ${base.fonts?.body}`,
    },
  });

export default theme;

pages/_app.js

import { ChakraProvider } from "@chakra-ui/react";
import theme from "../src/theme";
import "../src/theme/styles.css";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

I've followed all the given instructions here https://chakra-ui.com/guides/getting-started/nextjs-guide but still can't resolve the issue. Hoping someone can help on this. Thanks!