Invalid hook call and it drove me crazy? - reactjs

Question

Hello ,I am new to React and Now I would like to use MATERIAL-UI in my project but I got this error. Help me, please.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I Have Index.js Component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(
<React.Fragment>
<App />
</React.Fragment>,
document.getElementById("root")
);
registerServiceWorker();
and App.js is the functional Component:
import React from 'react'
import Layout from './Layout/Layout'
function App() {
return <Layout/>
}
export default App
and Styles.js Component from material-ui:
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
root: {
display: "flex",
height: "100vh",
width: "100%",
},
rightSidebar: {
background: "#BDC3C7",
width:'18%'
},
leftSidebar: {
background: "#BDC3C7",
width:'25%'
},
mainPart: {
background: "#BDC3C7",
flex:1
},
});
export default useStyles;
and Layout.js Component is:
import React from "react";
import useStyles from "./Styles";
function Layout() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.rightSideba}>right side bar</div>
<div className={classes.mainPart}>main part</div>
<div className={classes.leftSidebar}>left side bar</div>
</div>
);
}
export default Layout;
Thank you

Answer 1

Start simple: What React / React DOM versions do you have?
Then: Does your environment (browser?) start multiple instances of React / React DOM? (esp. any older ones dangling around)