I have a very simple example of how to use a template in a ColumnDirective, but the column doesn't work; it always remains empty. What could be happening, and how can I fix it?
```
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { GridColumnDirTypecast } from '@syncfusion/ej2-react-grids';
const GridComponentCustom: React.FC = () => {
const data = [
{ id: 1, name: 'John Doe', age: 28 },
{ id: 2, name: 'Jane Smith', age: 34 },
];
const cellTemplate = (props: any) => {
return (
<div style={{ color: 'blue' }}>
{props.name} ({props.age} años)
</div>
);
};
return (
<GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='id' headerText='ID' width='100' textAlign='Right' />
<ColumnDirective field='name' headerText='Name' width='200' />
<ColumnDirective
field='age'
headerText='Age'
width='100'
textAlign='Right'
template={cellTemplate as GridColumnDirTypecast['template']}
/>
</ColumnsDirective>
</GridComponent>
);
};
export default GridComponentCustom;
```
result: