unable to toggle dropdown list in react

i have created a simple react project and i was trying to implement drop down list in it.

i am trying to create a dropdown list for profile in react like this->

dropdown.js

   import React, { useState } from "react";
import "./style.css";
function DropdownNavbar() {
const [toggle, setToggle] = useState(false);
const menuToggle = () => {
setToggle(!toggle);
};
return (
<>
<div className="new-box d-flex" onClick={menuToggle}>
<div className="profile p-2 flex-fill">
<img src="images/avatar-img.png" />
</div>
<div className="name-text p-2 flex-fill">Alex John</div>
</div>
{toggle && (
<div class="menu">
<ul>
<li>
<a href="#">My profile</a>
</li>
<li>
<a href="#">Inbox</a>
</li>
<li>
<a href="#">Logout</a>
</li>
</ul>
</div>
)}
</>
);
}
export default DropdownNavbar;

style.css

.new-box{
display: flex;
}
.name-text{
margin-top: 15px;
}
.profile {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
margin: 5px 10px 5px 0px;
}
.profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
.menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.menu ul li:hover img {
opacity: 1;
}
.menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.menu ul li:hover a {
color: #ff5d94;
}

i am adding this profile thing in my navbar. navbar is being rendered in App.js
when i click on div nothing happens. can someone help here?

Mistake in handler

It should be:

onClick={menuToggle}

And dont use class - use className, not directly DOM - use useState hook.
Example:

const [isOpen, setIsOpen] = useState(false);
const menuToggle = () => {
setIsOpen((prev) => !prev);
};

<div className={isOpen ? "menu active" : "menu"}>
//...

https://codesandbox.io/s/kind-rgb-wlwlgf

found a better way to implement drop down (on hover) instead of onclick.

Dropdown.js

import React from "react";
import { AiFillCaretDown } from "react-icons/ai";
import "./style.css";
function DropdownNavbar() {
return (
<div className="dropdown">
<button className="dropbtn">
<div className="new-box d-flex">
<div className="p-2 flex-fill">
<img src="images/avatar-img.png" />
</div>
<div
style={{ marginTop: "5px", marginLeft: "10px" }}
className="p-2 flex-fill"
>
<span className="dropdown-text">Alex John</span>
</div>
<div
style={{ marginTop: "8px", marginLeft: "10px" }}
className="p-2 flex-fill"
>
<AiFillCaretDown />
</div>
</div>
</button>
<div className="dropdown-content">
<a href="#">Profile</a>
<a href="#">Help</a>
<a href="#">Logout</a>
</div>
</div>
);
}
export default DropdownNavbar;

style.css

.dropdown {
float: left;
overflow: hidden;
margin-top: 5px;
}
.dropdown img {
width: 40px;
height: 40px;
}
.dropdown-text {
color: Black;
}
.new-box {
display: flex;
}
.dropdown .dropbtn {
margin-right: 30px;
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
}
.dropdown:hover .dropbtn {
background-color: #d8d8d8;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8d8d8;
}
.dropdown:hover .dropdown-content {
display: block;
}