Estoy usando componentes con estilo y quiero usar onClick en el div con estilo pero no funciona. ¡Intenté usar div normal y funcionó! ¿Puede alguien ayudarme? ¡Los fragmentos están abajo!

KindOfShootLayout es mi componente con estilo

 <KindOfShootLayout onClick={() => gib()}> {type.name} <i className={type.icon}></i> </KindOfShootLayout>

Mi función gib()

 const gib =()=>{ alert('hi') }

KindOfShootLayout.js

 import React from 'react'; import styled from 'styled-components'; const Container = styled.div` background: ${props => props.primary ? "pink" : "palevioletred"}; color:${props => props.primary ? "white" : "palevioletred"}; height: 15vh; width: 22vw; vertical-align: baseline; text-align:center; vertical-align: middle; text-transform: uppercase; font-size: 20px; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); padding: 2px; border: 2px dashed rgba(209, 213, 219, 0.3); :hover{ background: ${props => props.primary ? "white" : "red"}; color: white; cursor: pointer; font-weight: 900; } @media (max-width: 1140px) { vertical-align: middle; width: 50vw; height: 10vh; text-align: center; margin-left: 5%; }

` ;

exportar por defecto ({hijos}) => {hijos};