onClick is not working in Styled component in react - reactjs

Question

I am trying to implement a dropdown in react styled component. I am trying to set the submenu onClick. But on click function is not getting called. I want to set submenu on click of SidebarLink component. and display the dropdown submenu
I tried this https://github.com/styled-components/vue-styled-components/issues/22
https://www.geeksforgeeks.org/how-to-create-a-responsive-sidebar-with-dropdown-menu-in-reactjs/
SidebarData
import React from "react";
export const SidebarData = [
{
title: "Feeds",
path: "/feeds",
icon: "Images/images/feed_inactive.svg",
iconsrc: "Images/images/feed_active.svg",
},
{
title: "Groups",
path: "/groups",
icon: "Images/images/notactive_people.svg",
iconsrc: "Images/images/icon_ionic_ios_people.svg",
subNav: [
{
title: "All",
status: "all",
cName: "sub-nav",
},
{
title: "Have met",
status: "met",
cName: "sub-nav",
},
{
title: "Favorite",
status: "fav",
cName: "sub-nav",
},
{
title: "Expired",
status: "expired",
cName: "sub-nav",
},
],
},
{
title: "Chats",
path: "/chats",
icon: "Images/images/notactive_chat_bubble.svg",
iconsrc: "Images/images/icon_material_chat_bubble.svg",
subNav: [
{
title: "Open Threads",
cName: "sub-nav",
status: "threads",
},
{
title: "Favorite",
cName: "sub-nav",
status: "favMem",
},
{
title: "Expired",
cName: "sub-nav",
status: "expChat",
},
],
},
{
title: "Event",
path: "/event",
icon: "Images/images/intersection_51.svg",
iconsrc: "Images/images/intersection_act.svg",
},
];
SidebarLink
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { Image } from "react-bootstrap";
const SidebarLink = styled.button`
display: flex;
color: black;
justify-content: space-between;
align-items: center;
padding: 20px;
list-style: none;
height: 60px;
text-decoration: none;
font-size: 18px;
&:hover {
background: #252831;
border-left: 4px solid green;
cursor: pointer;
}
`;
const SidebarLabel = styled.span`
margin-left: 16px;
`;
const DropdownLink = styled(Link)`
background: #252831;
height: 60px;
padding-left: 3rem;
display: flex;
align-items: center;
text-decoration: none;
color: black;
font-size: 18px;
&:hover {
background: green;
cursor: pointer;
}
`;
const SubMenu = (props) => {
const [subnavigation, setSubnavigation] = useState(false);
const showSubnav = () => {
console.log("ddjhj");
setSubnavigation(!subnavigation);
};
useEffect(() => {
console.log("subnav", subnavigation);
}, [subnavigation]);
return (
<>
<SidebarLink onClick={showSubnav}>
{props.item.title}
<span>
{" "}
{props.item.path === window.location.pathname ? (
<Image src={props.item.iconsrc} />
) : (
<Image src={props.item.icon} />
)}
</span>
</SidebarLink>
{subnavigation &&
props.item.subNav.map((item, index) => {
return (
<DropdownLink onClick={() => props.status(item.status)} key={index}>
{item.icon}
<SidebarLabel>{item.title}</SidebarLabel>
</DropdownLink>
);
})}
</>
);
};
export default SubMenu;
Sidebar
import React, { useState, useContext, useEffect } from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { SidebarData } from "./SidebarData";
import SubMenu from "./SubMenu";
import { IconContext } from "react-icons/lib";
import { Image } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { MdAccountBalanceWallet } from "react-icons/md";
import { getUserProfile } from "../../../Redux/Slices/DashboardSlice";
import { getPoints, logout } from "../../../Redux/Slices/SidebarSlice";
import {
sidebarToggle,
statusCheck,
userProfile,
} from "../../../Contexts/context";
import "./sidebar.css";
import Loading from "../../../Functions/Loading";
const NavIcon = styled(Link)`
margin-left: 2rem;
font-size: 2rem;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
`;
const SidebarNav = styled.nav`
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
transition: 350ms;
z-index: 10;
`;
const SidebarWrap = styled.div`
width: 100%;
`;
const Sidebar = (props) => {
const dispatch = useDispatch();
const { sidebarShow, setSidebarShow } = useContext(sidebarToggle);
const [sidebar, setSidebar] = useState(false);
const [loading, setLoading] = useState(false);
const { UserData, setUserData } = useContext(userProfile);
const [Points, setPoints] = useState();
const { Status, setStatus } = useContext(statusCheck);
const statusChecked = (status) => {
switch (status) {
case "expired":
return setStatus({
all: false,
fav: false,
met: false,
expired: true,
});
case "met":
return setStatus({
all: false,
fav: false,
met: true,
expired: false,
});
case "fav":
return setStatus({
all: false,
fav: true,
met: false,
expired: false,
});
case "threads":
return setStatus({
favMem: false,
threads: true,
expChat: false,
});
case "favMem":
return setStatus({
favMem: true,
threads: false,
expChat: false,
});
case "expChat":
return setStatus({
favMem: false,
threads: false,
expChat: true,
});
default:
return setStatus({
all: true,
threads: true,
fav: false,
met: false,
expired: false,
});
}
};
useEffect(() => {
dispatch(getUserProfile()).then((response) =>
setUserData(response.payload && response.payload.userprofile)
);
dispatch(getPoints()).then((response) =>
setPoints(response.payload && response.payload.points)
);
}, []);
const logOut = () => {
setLoading(true);
dispatch(logout()).then((response) => {
setLoading(false);
window.location.replace("/");
});
};
return (
<>
<IconContext.Provider value={{ color: "#fff" }}>
<div
className={
sidebarShow
? " vertical-nav bg-white mt-5"
: "vertical-nav bg-white active mt-5"
}
id="sidebar"
>
<SidebarNav>
<SidebarWrap>
{SidebarData.map((item, index) => {
return <SubMenu item={item} key={index} />;
})}
</SidebarWrap>
</SidebarNav>
</div>
</IconContext.Provider>
</>
);
};
export default Sidebar;