Kendo UI Grid (functional component)

export function Dashboard() {
  const [data, setData] = React.useState([] as any);
  const [editID, setEditID] = React.useState({} as any);

  React.useEffect(() => {
    setData(sampleProducts);
  }, []);

  const rowClick = (event: any) => {
    setEditID(event.dataItem.ProductID);
  };

  const itemChange = (event: any) => {
    const inEditID = event.dataItem.ProductID;
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    const newData = data.map(item =>
      item.ProductID === inEditID
        ? { ...item, [event.field]: event.value }
        : item,
    );
    setData(newData);
  };

  const closeEdit = event => {
    if (event.target === event.currentTarget) {
      setEditID({ editID: null });
    }
  };

  const addRecord = () => {
    const newRecord = { ProductID: data.length + 1 };

    setData([newRecord, ...data]);
    setEditID(newRecord.ProductID);
  };

  return (
    <div className="flex flex-col w-full">
      <Header>
        <Title>Dashboard</Title>
      </Header>
      <Content>
        <StyledNav>
          <span className="title">Details</span>
          <span className="active">Items</span>
          <span>Extra Charges</span>
          <span className="disabled">Manifest</span>
          <span className="disabled">Grouped</span>
          <span>Notes</span>
          <span>Comments</span>
        </StyledNav>
      </Content>
      <Content>
        <Grid
          style={{ height: '420px' }}
          sortable
          data={data.map(item => ({
            ...item,
            inEdit: item.ProductID === editID,
          }))}
          editField="inEdit"
          onRowClick={rowClick}
          onItemChange={itemChange}
        >
          <GridToolbar>
            <div onClick={closeEdit}>
              <button
                title="Add new"
                className="k-button k-primary"
                onClick={addRecord}
              >
                Add new
              </button>
            </div>
          </GridToolbar>
          <Column field="ProductID" title="Id" width="50px" editable={false} />
          <Column field="ProductName" title="Name" editor="text" />
          <Column
            field="FirstOrderedOn"
            title="First Ordered"
            editor="date"
            format="{0:d}"
          />
          <Column
            field="UnitsInStock"
            title="Units"
            width="150px"
            editor="numeric"
          />
          <Column field="Discontinued" title="Discontinued" editor="boolean" />
        </Grid>
}