useState not working in next js with material ui drawer - reactjs

Question

useState not working. I have searched for a solution I checked many forms like https://github.com/vercel/next.js/issues/7626 , https://github.com/vercel/next.js/issues/17592 ,
Hooks error: Invalid Hook Call using NextJS or ReactJS on Windows , some people seem to suggest that it can be solved by removing a node module that they did not mention the name of, others says it works if they change their webpack configurations but i have never used webpack and couldn't find they mentioned so I am stuck.
I was implementing material ui's drawer, i have created a drawer component and imported it.
Nav.jsx:
import React, { useState } from 'React'
import SignedOutLinks from "./Links/SignedOutLinks"
import { AppBar, Toolbar } from "#material-ui/core"
import MenuBtn from "./Links/MenuBtn"
import Logo from "./Links/Logo"
import CategoryBtn from "./Links/CategoryBtn"
import ShoppingCartBtn from "./Links/ShoppingCartBtn"
import LanguageBtn from "./Links/LanguageBtn"
import DarkModeBtn from "./Links/DarkModeBtn"
import NotificationBtn from "./Links/NotificationBtn"
import SignedIn from "./Links/SignedIn"
import Grid from '#material-ui/core/Grid';
import Search from "./Search/Search"
import { useTheme } from '#material-ui/core/styles';
import useMediaQuery from '#material-ui/core/useMediaQuery';
import Drawer from './Drawer/Drawer'
const signedIn = true
const Nav = () => {
const [isOpened, setIsOpened] = useState(false)
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
const handleDrawerToggle = () => {
setIsOpened(!isOpened)
}
return (
<AppBar color="transparent" elevation={0} >
<Toolbar>
{
!isMobile?
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
spacing={10}
>
<Grid item container spacing={5} xs={4} justify="flex-start" wrap="nowrap">
<Grid item>
<Logo/>
</Grid>
<Grid item>
<CategoryBtn />
</Grid>
</Grid>
<Grid item xs={4}>
<Search />
</Grid>
<Grid item container xs={4} justify="flex-end" wrap="nowrap">
<ShoppingCartBtn />
<LanguageBtn />
<DarkModeBtn />
<NotificationBtn />
{signedIn? <SignedIn /> : <SignedOutLinks />}
</Grid>
</Grid>
:
<div>
<Drawer isOpened={isOpened} />
<Grid
container
direction="row"
justify="space-around"
spacing={10}
>
<Grid item container xs={4} justify="flex-start">
<MenuBtn handleClick={handleDrawerToggle} />
</Grid>
<Grid item Container xs={4} justify="center" style={{textAlign: "center"}}>
<Grid item>
<Logo />
</Grid>
</Grid>
<Grid item container xs={4} justify="flex-end">
<ShoppingCartBtn />
</Grid>
</Grid>
</div>
}
</Toolbar>
</AppBar>
)
}
export default Nav
Drawer.jsx:
import { Drawer as MUIDrawer} from '#material-ui/core'
import { List, ListItem,ListItemText, ListItemIcon } from '#material-ui/core'
import NotificationsIcon from '#material-ui/icons/Notifications';
import TranslateIcon from '#material-ui/icons/Translate';
import Brightness4Icon from '#material-ui/icons/Brightness4';
import LocalShippingIcon from '#material-ui/icons/LocalShipping';
import AccountCircleIcon from '#material-ui/icons/AccountCircle';
import BusinessIcon from '#material-ui/icons/Business';
import ExitToAppIcon from '#material-ui/icons/ExitToApp';
import ChatBubbleOutlineIcon from '#material-ui/icons/ChatBubbleOutline';
import CategoryIcon from '#material-ui/icons/Category';
function Drawer({isOpened}) {
const items = [
{
text: user.userName,
icon: <AccountCircleIcon />
},
{
text: "Categories",
icon: <CategoryIcon />
},
{
text: "Language",
icon: <TranslateIcon />
},
{
text: "Mode",
icon: <Brightness4Icon />
},
{
text: "Notifications",
icon: <NotificationsIcon />
},
{
text: "Orders",
icon: <LocalShippingIcon />
},
{
text: "Are You a Seller?",
icon: <BusinessIcon />
},
{
text: "Messages",
icon: <ChatBubbleOutlineIcon />
},
{
text: "Logout",
icon: <ExitToAppIcon />
}
]
return (
<div>
<MUIDrawer open={isOpened}>
<List>
{
items.map(item => {
return (
<ListItem button key={item.text} >
{item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
<ListItemText primary={item.text} />
</ListItem>
)
})
}
</List>
</MUIDrawer>
</div>
)
}
export default Drawer
Note it was working fine until i coded the Drawer, also useState is imported at the very beginning ing so i didn't forget to import it
Edit:
Folder Structure in next.js
index.js:
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Nav from '../Components/Navbar/Nav'
export default function Home() {
return (
<>
<Head>
<meta name="description" content="Everything for everyone. TRNC E-commerce website focused on a huge variety of categories from fashion to electronics. Order now and get your product delivered." />
</Head>
<div className={styles.container}>
<Nav />
</div>
</>
)
}

Answer 1

Its finally working, however I couldn't find the problem. I solved it by literaly creating a new component called Nav2 that i copied the same code from the original Nav component from and voila it worked, i deleted the old Nav component and renamed Nav2 to Nav and it kept working.
Note: i found that i forgot to import useContext in the drawer as user is an deconstructed object that is sent from _app.js so i added
const { user } = useContext(UserContext)
to the beginning of the component function