Converting a react made responsive navbar into nextjs navbar - next.js

Question

I am trying to convert a react made responsive navbar component into next js navbar component. I don't know much about next js. Can anyone help with this code.The responsiveness works just fine. However, I cannot close the hamburger menu once I clicked it. The issue is with close Hamburger menu button. Here is the navbar component code converted from React js app:
import React from 'react';
import React from 'react';
import { GiHamburgerMenu } from 'react-icons/gi';
import { MdOutlineRestaurantMenu } from 'react-icons/md';
import Image from "next/image";
import styles from "../styles/Navbar.module.css"
const Navbar = () => {
const [toggleMenu, setToggleMenu] = React.useState(false);
return (
<nav className={styles.app__navbar}>
<div className={styles.app__navbar_logo}>
<Image src="/img/ephielogo.png" alt="app__logo" />
</div>
<ul className={styles.app__navbar_links}>
<li className={styles.p__opensans}>Home</li>
<li className={styles.p__opensans}>About</li>
<li className={styles.p__opensans}>Menu</li>
<li className={styles.p__opensans}>Awards</li>
<li className={styles.p__opensans}>Contact</li>
</ul>
<div className={styles.app__navbar_login}>
<a href="#login" className={styles.p__opensans}>Log In / Registration</a>
<div />
<a href="/" className={styles.p__opensans}>Book Table</a>
</div>
<div className={styles.app__navbar_smallscreen}>
<GiHamburgerMenu color="#fff" fontSize={27} onClick={() => setToggleMenu(true)} />
{toggleMenu && (
<div className={styles["app__navbar_smallscreen_overlay"] + " " + styles["flex__center"] + styles["slide_bottom"]}>
<MdOutlineRestaurantMenu fontSize={27} className="overlay__close" onClick={() => setToggleMenu(false)} />
<ul className={styles.app__navbar_smallscreen_links}>
<li><a href="#home" onClick={() => setToggleMenu(false)}>Home</a></li>
<li><a href="#about" onClick={() => setToggleMenu(false)}>About</a></li>
<li><a href="#menu" onClick={() => setToggleMenu(false)}>Menu</a></li>
<li><a href="#awards" onClick={() => setToggleMenu(false)}>Awards</a></li>
<li><a href="#contact" onClick={() => setToggleMenu(false)}>Contact</a></li>
</ul>
</div>
)}
</div>
</nav>
);
};
export default Navbar;
Here is my Navbar.Module.css code.
.app__navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-black);
padding: 1rem 2rem;
}
.app__navbar_logo {
display: flex;
justify-content: flex-start;
align-items: center;
}
.app__navbar_logo img {
width: 150px;
}
.app__navbar_links {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-white);
list-style: none;
}
.app__navbar_links li {
margin: 0 1rem;
cursor: pointer;
}
.app__navbar_links li:hover {
color: var(--color-grey);
}
.app__navbar_login {
display: flex;
justify-content: flex-end;
align-items: center;
}
.app__navbar_login a {
margin: 0 1rem;
text-decoration: none;
transition: .5s ease;
color: var(--color-white)
}
.app__navbar_login a:hover {
border-bottom: 1px solid var(--color-golden);
}
.app__navbar_login div {
width: 1px;
height: 30px;
background: var(--color-grey);
}
.app__navbar_smallscreen {
display: none;
}
.app__navbar_smallscreen_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--color-black);
transition: .5s ease;
flex-direction: column;
z-index: 5;
}
.app__navbar_smallscreen_overlay .overlay__close {
font-size: 27px;
color: var(--color-golden);
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.app__navbar_smallscreen_links {
list-style: none;
}
.app__navbar_smallscreen_links li {
margin: 2rem;
cursor: pointer;
color: var(--color-golden);
font-size: 2rem;
text-align: center;
font-family: var(--font-base);
}
.app__navbar_smallscreen_links li:hover {
color: var(--color-white);
}
#media screen and (min-width: 2000px) {
.app__navbar_logo img {
width: 210px;
}
}
#media screen and (max-width: 1150px) {
.app__navbar_links {
display: none;
}
.app__navbar_smallscreen {
display: flex;
}
}
#media screen and (max-width: 650px) {
.app__navbar {
padding: 1rem;
}
.app__navbar_login {
display: none;
}
.app__navbar_logo img {
width: 110px;
}
}