React + Chakra UI Color Mode Flash Issue - Dark/Light mode flashes before changing to the correct mode

Question

Chakra have said that this is a known issue on their website: https://chakra-ui.com/docs/styled-system/color-mode#color-mode-flash-issue

It's basic React + Chakra UI.

When setting dark mode initially, then switch to light mode and reload or navigate - it flashes dark before going to the correct mode. Or vice versa.

I did a console.log on the UseColorMode() to check as it loads what the value is. As expected, first it gives me a value of "light" before giving the "dark" value afterwards. Or vice versa.

index.tsx

import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"
import * as React from "react"
import * as ReactDOM from "react-dom/client"
import { App } from "./App"
import reportWebVitals from "./reportWebVitals"
import * as serviceWorker from "./serviceWorker"
import theme from "../src/theme"

const container = document.getElementById("root")
if (!container) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(container)

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <App />
    </ChakraProvider>
  </React.StrictMode>,
)

App.tsx

import HeaderNavbar from "./Components/Header/Header"
import Footer from "./Components/Footer/Footer"
import { Home } from "../src/Pages/Home/Home"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { About } from "../src/Pages/About/About";

export const App = () => {
  return (
    <>
      <HeaderNavbar />
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
      <Footer/>
    </>
  );
};

theme.ts

import { extendTheme, type ThemeConfig } from '@chakra-ui/react'

const config: ThemeConfig = {
  initialColorMode: "dark",
  useSystemColorMode: false,
}

const theme = extendTheme({ config })

export default theme

I tried moving the ChakraProvider and ColorModeScript around, and even moved them to the app.tsx to check, then I followed the exact conventions used in https://chakra-ui.com/docs/styled-system/color-mode

I honestly haven no idea at this point.. any insight will be helpful!