Is there a way to render your custom JSX.Element in a grid cell?

Problem:

I have attached a piece of code for your reference.
So, this issue is that the 2nd column will be rendered since data(value) is a string and the 3rd column will be rendered as though I am rendering JSX but data is a string.
But the first column will not be rendered as the data is a JSX.Element.
So is there a way to achieve this (i.e., to render 1st column).I am looking for a direct way or any workaround to achieve this.

Thanks. Regards

export const ZingGridTable = function ZingGridTable() {
return (
<zing-gri
page-size="20"
search
sort
zebra
filter
pager
responsive
editor
layout-controls
context-menu
static-menu
column-drag
column-drag-action="reorder"
column-resizable
layout="row"
data=[{
'column1': <div className="hello">hello</div>,
'column2': 'column2',
'column3': 'column3',
},]
>
<zg-colgroup>
<zg-column
key="column1"
header="column1"
index="column1"
filter="disabled"
type="JSX.Element"
type-element-tag-name="div"
/>
<zg-column
key="column2"
header="column2"
index="column2"
filter="disabled"
type="JSX.Element"
type-element-tag-name="div"
/>
<zg-column
key="column2"
header="column2"
index="column2"
filter="disabled"
type="JSX.Element"
type-element-tag-name="div"
>
<div className="column3">
[[index.column3]]
</div>
</zg-column>
</zg-colgroup>
</zing-grid>
)
}

Solution:

Yes, there is a way to render your custom JSX.Element in a grid cell. The trick is in using template literals (template strings) on your data values as we did in this demo.