I want to hide sidebar after selecting elements or clicking outside on the page. I written this code, it worked but main problem is it hide sidebar when I click on elements which have subnav it hides and I clicked on menu button again, then selecting items on subnav. Please help me to resolve this problem.

enter code here   

const Nav = styled.div`
  background: #15171c;
  height: 80px;
  width: 7%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position:fixed;
  z-index:998;
  
`;

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: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index:999;
  top: 0;
  left: ${({ sidebar }) => (sidebar ? "0" : "-100%")};
  transition: 350ms;
  clip-path: polygon(0 0, 38% 0, 18% 100%, 0% 100%);
  background-color: #c10273;
  overflow-y:scroll;
`;

const SidebarWrap = styled.div`
  width: 100%;
`;

const Sidebar = () => {

  let useClickOutside = (handler) => {
    let domNode = useRef();
  
    useEffect(() => {
      let maybeHandler = (event) => {
        if (!domNode.current.contains(event.target)) {
          handler();
        }
      };
  
      document.addEventListener("mousedown", maybeHandler);
  
      return () => {
        document.removeEventListener("mousedown", maybeHandler);
      };
    });
  
    return domNode;
  };
  const [sidebar, setSidebar] = useState(false);

  const showSidebar = () => setSidebar(!sidebar);

  let domNode = useClickOutside(() => {
    setSidebar(false);
  });

 

  return (
    <>
      <IconContext.Provider value={{ color: "#fff" }}>
        <Nav ref={domNode}>
          <NavIcon to="#">
            <FaIcons.FaBars onClick={showSidebar} value={{color:"#c10273"}} />
          </NavIcon>
        </Nav>
        
        <SidebarNav sidebar={sidebar}>
          <SidebarWrap>
            <NavIcon to="#">
              <AiIcons.AiOutlineClose onClick={showSidebar} />
            </NavIcon>
            {SidebarData.map((item, index) => {
              return <Subnav item={item} key={index} />;
            })}
          </SidebarWrap>
        </SidebarNav>
      </IconContext.Provider>
    </>
  );
};

export default Sidebar;

Please Help Me