问React Kendo lib -需要双击才能触发onclick回调

EN

import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
const App = () => {
    return (
      <PanelBar>
        <PanelBarItem expanded={true}>
          <ParentComponent  />
        </PanelBarItem>
      </PanelBar>
    );
}

ReactDOM.render(<App />, document.querySelector('my-app'));

import React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import products from './products.json';

const ParentComponent = () => {
  return (
    <Grid style={{ height: '400px' }} data={[...products]}>
      <Column
        field="ProductID"
        title="ID"
        width="100px"
        cell={(props) => (
          <td>
            <div onClick={()=>{
              console.log("test")
            }}>Click</div>
          </td>
        )}
      />
      <Column field="ProductName" title="Name" width="250px" />
      <Column field="Category.CategoryName" title="CategoryName" />
      <Column field="UnitPrice" title="Price" />
      <Column field="UnitsInStock" title="In stock" />
      <Column
        field="Discontinued"
        cell={(props) => (
          <td>
            <input
              disabled
              type="checkbox"
              checked={props.dataItem[props.field]}
            />
          </td>
        )}
      />
    </Grid>
  );
};

export default ParentComponent;

<div onClick={() => {
     console.log("test")
}}>Click</div>

(props) => (<div onClick={() => console.log(“test”)}>Click<div/>