Include TSX component in exported pdf

Question

Using React, DevExtreme and jsPDF. I have a DataGrid (devextreme) with some data rendered in it using text and TSX components. I have an export function on the datagrid. However only the displayValue is used in the report, not the rendered cell. I'd like to include TSX components to the report (preferably, using the rendered cell content), but cannot figure the way to do it properly and efficiently.

Here is the current code :

<DataGrid
  dataSource={dataToDisplay}
  showBorders={true}
  width='100%'
  onExporting={onExporting}
>
  <Column
    caption={formatMessage({ id: 'tabs.search-duties.list.hours' })}
    headerCellRender={renderHoursHeader}
    calculateCellValue={getTimeCellValue}
    cellRender={renderTimeCellValue}
    dataType='string'
    width={'auto'}
    sortingMethod={(val1, val2) => {
      return val1 < val2 ? 1 : -1;
    }}
    sortIndex={1}
  />
// ignoring the rest
</ DataGrid>

The getTimeCellValue and renderTimeCellValue :

  const getTimeCellValue = (d: DataToDisplay) =>
    (d.isDay ? '09:00' : '22:00') + ' - ' + (d.isNight ? '09:00' : '22:00');
  const renderTimeCellValue = (cell) => (
    <span>
      {cell.displayValue} {cell.displayValue.startsWith('09:00') ? <SunIcon /> : <></>}{' '}
      {cell.displayValue.endsWith('09:00') ? <MoonIcon /> : <></>}
    </span>
  );

The onExporting function :

  const onExporting = ({ component }: DataGridTypes.ExportingEvent) => {
    const doc = new jsPDF('l', 'mm', [297, 210]);

    exportDataGrid({
      jsPDFDocument: doc,
      component: component,
      indent: 5,
      columnWidths: [40, 70, 120, 38],
    }).then(() => {
      // ignored code, not relevant
      doc.save(`my-report.pdf`);
    });
  };

I though that using customDrawCell argument would help See doc, but so far, not really.

I need the renderTimeCellValue to be used in report instead of the calculated getTimeCellValue data

EDIT :

I've tried the following :

const html = renderToStaticMarkup(MyIcon());

exportDataGrid({
      jsPDFDocument: doc,
      component: component,
      indent: 5,
      columnWidths: [40, 70, 120, 38],
      customDrawCell: (e) => {
        if (e.gridCell.rowType === 'data' && e.gridCell.column.dataField === 'hours') {
          doc.html(html, { x: e.rect.x, y: e.rect.y, width: e.rect.w });

  // ignoring rest

where MyIcon in HTML is :

<img src="http://localhost:3000/icon.30dfa4d8.svg?1709910588698" width="16" height="16"/>

But this gives the following error :

Error loading image http://localhost:3000/icon.30dfa4d8.svg?1709910588698