ReactJS Highcharts点击事件未传递给子组件

Question

这是我的reactjs组件，即时通讯使用了highcharts的一部分，我为highcharts创建了选项并设置为状态变量。状态变量将传递到子组件。

子组件无法访问onclick函数。

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      employee_data: [],
      column_names: [],
      page_num: 1,
      group_by_gender_data: {}

    }
  }

  componentDidMount = () => {
    this.fetchData();
  }

  fetchData = async () => {          
      fetch(county_data).
        then(response => response.json()).
        then(response => {

          console.log(response.data)

          let column_names = _.map(response.meta.view.columns, 'name')
          let grouped_data_by_chunks = _.chunk(response.data, response.data.length/100)

          console.log('grouped_data -', grouped_data_by_chunks)

          this.setState({
            employee_data: grouped_data_by_chunks[0],
            column_names: column_names
          })                        

          this.populate_group_by_gender_chart(_.map(response.data, 9));

        })
  }

    populate_group_by_gender_chart = (data) =>{
      const result = _.values(_.groupBy(data)).map(d => ({'y' : d.length,
                                                          'name' : d[0] == 'F' ? 'Female': 'Male'
                                                        }));
      console.log('populate_group_by_gender_chart d - ', JSON.stringify(result))

      const options = {
        chart: {
          type: "pie"
        },
        title: {
          text: 'Employees by Gender'
        },
        series: [          
          {
            name: 'Gender',
            data: result
          }
        ],
        point:{
          events:{
            // click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y);  }
            click: function () {
              console.log(this);
          }
          }
        }    
      };
      this.setState({
        group_by_gender_options: options
      })
    }

  render() {
    return (
      <div className="App">
        <Container fluid={true}>

          <Header/>

          <Wrapper data={this.state.employee_data}
                   group_by_gender_chart_data={this.state.group_by_gender_options}
          ></Wrapper>

        </Container>      
      </div>
    );
  }
}

export default App;

子组件：-

export default function(props){
    console.log('charts - ', JSON.stringify(props.group_by_gender_chart_data))
    return(
        <Row>        
            <Col sm={5}>                                  
                    <PieChart highcharts={Highcharts} options={props.group_by_gender_chart_data} />                
            </Col>            
            <Col>                  
                Chart2
            </Col>            
        </Row>
    )
}

以下是图表数据-

charts -  {"chart":{"type":"pie"},"title":{"text":"Employees by Gender"},"series":[{"name":"Gender","data":[{"y":4137,"name":"Female"},{"y":5934,"name":"Male"}]}],"point":{"events":{}}}

事件为空白。