I'am trying to trigger an onCick event that i passed to my style component icon tag but for some reason the event does not get triggered when the icon is clicked. I've tried raping it in a div and passing the onClick event to the div instead but still get the same result. here is the code:

import React from "react";
import { useState } from "react";
import StyledNav, {NavbarhamButton} from "./style/Navbar.styled";


const Navbar = () => {
  const [NavOpen, setNavOpen] = useState(false);

  return (
    <StyledNav>
      <NavbarhamButton
        className="fas fa-bars"
        onclick={() => setNavOpen(!NavOpen)}
      />
     
    </StyledNav>
  );
};

export default Navbar;

Here is the styled components:

import { Link } from "react-router-dom";
import styled from "styled-components";
import { theme } from "../../theme";

const StyledNav = styled.div``;

export const NavbarhamButton = styled.i`
  position: absolute;
  top: 0;
  left: 0;
  margin: 1rem;
  font-size: 2rem;
  color: white;
  @media screen and (min-width: 600px) {
    display: none;
  }
  z-index: 2;
`;

I just started to use style components of recent so am still trying to wrap my head around it please correct me if am doing something wrong thanks.