OnClick Functon не работает во вложенном компоненте карты памяти

Question

Я хочу вызвать функцию во вложенной Карте, но она не работает, хотя то же самое прекрасно работает, когда я вызываю функцию onClick в первой Карте.Я упомянул в функции onClick, что работает, а что не работает

<Card onClick={()=>{console.log('On Click Working here perfectly ')}}
  loading={this.state.cardLoad}
  title={
  <Input prefix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
  placeholder="Search"
  ref='search'
  onChange={this.searchFunction}
  />
  }
  >
  <Row gutter={12}>

    {

    this.state.productList.map((item, key) => (

    <Col span={6} key={key}>
    <Card onClick={()=>{console.log('On Click Not Working here')}}
      style={{ height: '180px', marginTop: '20px' }}

      cover={<img src={item.prodImg} alt="Product Image" style={{ height: '80px', width: '200px !important' }} />}
      >
      <p style={{ fontSize: 'small', fontWeight: 650, textAlign: 'center' }}>{item.name} </p>
    </Card>
    </Col>

    ))
    }
    <Row gutter={12}>

      <Col span={24}>
      <Pagination style={{ marginTop: "20px", marginBottom: "10px", float: 'right' }} current={this.state.current}
        onChange={this.onChangee} total={this.state.totalPageItem} />
      </Col>
    </Row>


    <h1>Categories</h1>
    {
    this.state.productCategoryList.map((item, key) => (
    <Col span={8} key={key}>
    <Card style={{ height: '150px', marginTop: '20px' }} cover={ <p style={{ fontSize: 'small', fontWeight: 650, textAlign: 'center' }}>{item.name}</p>
      }
      >
      <img alt="example" style={{ height: '80px', width: '200px !important' }} src={item.catImg} />
    </Card>
    </Col>
    ))
    }
    <Row gutter={12}>

      <Col span={24}>
      <Pagination style={{ marginTop: "20px", marginBottom: "10px", float: 'right' }} current={this.state.ccurrent}
        onChange={this.conChange} total={this.state.ctotalPageItem} />
      </Col>
    </Row>
  </Row>
</Card>

Есть ли какое-либо решение для этого ???Заранее спасибо