Estoy tratando de activar un evento onCick que pasé a mi etiqueta de icono de componente de estilo, pero por alguna razón, el evento no se activa cuando se hace clic en el icono. Intenté violarlo en un div y pasar el evento onClick al div, pero sigo obteniendo el mismo resultado. aquí está el código:

 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;

Aquí están los componentes con estilo:

 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; `;

Recién comencé a usar componentes de estilo recientes, así que todavía estoy tratando de entenderlo, corríjame si estoy haciendo algo mal, gracias.