How to add custom button to Rows of React Grid

export const MyCommandCell = (props) => {
  ...
  if (!dataItem.Discontinued) return null;
  return (
    <td className="k-command-cell">
    ...

Grid ->

/**
 * This method will return the Grid Table.
 * @param {Object} response
 * @returns {*}
 * @project:    ELD
 * @date:       2023-10-10
 * @author:     Mahesh
 */

import React from "react";
import { useRecoilValue } from "recoil";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { ExcelExport } from "@progress/kendo-react-excel-export";
import { selectedAccountState } from "../../../src/recoil/userAtoms";
import "../../../src/common/override.scss";

const GridTable = (props) => {
  const accountInfo = useRecoilValue(selectedAccountState);
  const { tenantIds } = accountInfo;
  const IsTenantId = tenantIds?.length > 0;
  const {
    data,
    gridData,
    _export,
    sortable,
    gridSort,
    page,
    columns,
    tenantId,
    setWidth,
    name,
    dataState,
    dataStateChange,
  } = props;

  const isConsumptionPage = name?.includes("Consumption");
  const isDownloadFile = name?.includes("downloadFile");
  const isLegacyPage = name?.includes('legacy');
  const gridHeight = isLegacyPage ? "700px" : gridData?.length > 7 ? "450px" : "";
  console.log('gridData -> ', gridData);

  const download = () => {
    console.log("download clicked");
  };

  const MyCommandCell = (props) => (
    <td>
      {gridData?.status !== 'Complete' ? (
        <>
          <button
            class="c-button c-button--secondary"
            type="button"
            onClick={() => download()}
          >
            Download
          </button>
          &nbsp;
          <button
            class="c-button c-button--secondary"
            type="button"
            onClick={() => download()}
          >
            Remove
          </button>
        </>
      ) : (
        <>
          <></>
        </>
      )}
    </td>
  );

  return (
    <>
      <ExcelExport data={gridData} ref={_export}>
        <Grid
          style={{
            height: gridHeight,
          }}
          name={name}
          filterable={true}
          sortable={sortable}
          pageable={true}
          {...dataState}
          data={data}
          page={page}
          onDataStateChange={dataStateChange}
        >
          {columns?.map((key, index) => {
            return (
              <GridColumn
                field={key.field}
                title={key.title}
                key={index}
                width={setWidth(key.minWidth)}
                format={key.format}
              />
            );
          })}
          {IsTenantId && !isConsumptionPage && (
            <GridColumn field={"mpnId"} title={"MPNID"} width={"300"} />
          )}
          {isDownloadFile && <GridColumn cell={MyCommandCell} width="200px" />}
        </Grid>
      </ExcelExport>
    </>
  );
};

export default GridTable;