I am using Styled components and want to use onClick on the styled div but does not work. I tried using normal div it worked! Can someone help me?, snippets are below!

KindOfShootLayout is my styled Component

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

My gib() function

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

}

` ;

export default ({ children }) => {children};