I need help resolving the following warning when using ChakraProvider component
"Warning react-dom.development.js:86 Warning: You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"."
Setup: I have a working nextjs app that uses Redux toolkit. App breaks with the above warning after adding chakra UI and set up as below
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
import Head from "next/head";
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/globals.css";
import Layout from "../components/layout/layout";
import { Provider } from "react-redux";
import { store } from "../store/app/store";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
//The import of ChakraProvider, extendTheme alone gives this warning. App works though. However when the theme config is setup as with colors below, the site breaks even when the ChakraProvider wrapper is removed. Where could the conflict be coming from?
const colors = {
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac",
},
};
const theme = extendTheme({ colors });
function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<ChakraProvider resetCSS theme={theme}>
<Layout>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"
/>
</Head>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
</Provider>
);
}
export default MyApp;