Syncfusion for React Grid with Row Template is not working

Question

I am using Syncfusion EJ2 for React, I have a Grid component that I want to add Row Template to. But the Row Template simply isn't working. The Grid remains empty.

I tried to keep the component as simple as possible and as close to their example as possible, still doesn't work.

Here is my full component:

import {
  ColumnDirective,
  ColumnsDirective,
  GridComponent,
  DetailRow,
  Inject,
} from ​"@syncfusion/ej2-react-grids";
import ​*​as ​React ​from ​"react";
import ​*​as ​ReactDOM ​from ​"react-dom";

interface ​iDataProps {
  dataRows: {}[];
  dataLayout: {
    enableLayoutChange:​boolean;
    enableLayoutSave:​boolean;
    enableLayoutLoad:​boolean;
    enableAggregateFunction:​boolean;
    enablePdfExport:​boolean;
    enableDataExport:​boolean;
    selectionSettings: {};
    groupSettings:​string[] |​undefined;
    sortSettings: {};
    enableInsert:​boolean;
    enableChange:​boolean;
    enableDelete:​boolean;
    enableSelect:​boolean;
  };
}
interface​ColumnMeta {
  field:​string;
  header:​string;
}

export​default ​function ​TableReport(props:​iDataProps) {
  const ​longestEntryIndex ​= ​props.dataRows.findIndex(
    (row) =>
      Object.keys(row).length​===
      Math.max(...props.dataRows.map((r) =>​Object.keys(r).length))
  );

  const ​columns:​ColumnMeta[] = ​Object.entries(
    props.dataRows[longestEntryIndex]
  ).map(([key]) => ({
    field:​key,
    header:​key,
  }));

  function ​gridTemplate(props:​any) {
    return (
      <tr ​className="templateRow">
        <td ​className="details">
          <table ​className="CardTable"​cellPadding={2}​cellSpacing={1}>
            <colgroup>
              <col ​style={{ width:​"50%" }}​/>
            </colgroup>
            <tbody>
              <tr>
                <td ​className="CardHeader">First Name </td>
                <td>:</td>
                <td>{props.Id.toString()}​</td>
              </tr>
              <tr>
                <td ​className="CardHeader">Last Name</td>
                <td>:</td>
                <td>{props.Description}​</td>
              </tr>
              <tr>
                <td ​className="CardHeader">Title</td>
                <td>:</td>
                <td>{props.Desc1}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    );
  }

  const ​template:​any​=​gridTemplate;

  return (
    <div ​className="control-pane">
      <div ​className="control-section">
        <GridComponent
          dataSource={props.dataRows}
          // @ts-ignore
          rowTemplate={template.bind(this)}
          width="auto"
          height="335"
        >
          <ColumnsDirective>
            <ColumnDirective
              key={columns[0].field}
              field={columns[0].field}
              headerText={columns[0].header}
              width="300"
              textAlign="Left"
            />
          </ColumnsDirective>
        </GridComponent>
      </div>
    </div>
  );
}

Props in gridTemplate contains the correct values when I console log it.