Grid custom cell Loses focus on any state Change

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { NumericTextBox } from '@progress/kendo-react-inputs';

const products = [
  {
    ProductID: 1,
    ProductName: 'Chai',
    Price: 18.0,
    Discount: 0,
  },
  {
    ProductID: 2,
    ProductName: 'Chang',
    Price: 19.0,
    Discount: 0,
  },
];

const CustomCell = (props) => {
  React.useEffect(() => {
    console.log('componet mount');
  }, []);

  return (
    <td style={{ padding: '1rem', textAlign: 'center' }}>
      <NumericTextBox
        onChange={(e) => props.onChange(e, props)}
        style={{ width: '100px' }}
        value={props.dataItem[props.field]}
      />
    </td>
  );
};

const App = () => {
  const [data, setData] = React.useState(products);

  const handleDiscountChange = (e, cellProps) => {
    setData((_data) => {
      return _data.map((item) => {
        if (item.ProductName === cellProps.dataItem.ProductName) {
          item.Discount = e.value || 0;
          item.Price -= item.Discount;
        }
        return item;
      });
    });
  };

  return (
    <>
      <Grid data={data} title={'title'} editField="inEdit">
        <GridColumn field="ProductName" title="Product Name" />
        <GridColumn
          field="Discount"
          cell={(props) => {
            return <CustomCell {...props} onChange={handleDiscountChange} />;
          }}
        />
        <GridColumn field="Price" title="Price" editor="numeric" />
      </Grid>
    </>
  );
};

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