How to format a column based on row values and render HTML or React component inside that column

Question

I'm using tabulator-tables - 5.5.2 package in my reactjs application. I'm able to render my table properly but trying to format recording column with some HTML output but it is not working as expected.

Here is the sample from my work.

Formatting a specific column and try to render two different HTML/JSX outputs based on the specific value form the same row.

const getHtmlOutput = (cell: CellComponent) => {
    const rowData = cell.getRow().getData();
    if (rowData?.callDuration > 0)
      return reactFormatter(
        <AudioPlayer
          id={rowData?.recordingId}
          src='' // {downloadCallRecording.data}
          filename='' // {downloadCallRecording.fileName}
        />
      );
    return reactFormatter(<>No recordings available</>);
  };

Column definition for a specific column called Recording

{
        title: 'Recording',
        field: 'recording',
        hozAlign: 'center',
        headerSort: false,
        width: 325,
        cssClass: 'detail-cell',
        formatter: 'html',
        formatterHtmlOutput: getHtmlOutput,
        cellClick: function (e: UIEvent, cell: CellComponent) {
          setSelectedDetail({ ...cell.getRow().getData() });
          handlePlay(cell);
        },
      },

May I know, why this is not working.

For more information: If I'm apply the reactFormatter directly to the format it works but I need conditional render to display 'No recordings available' and also want to pass recordingId to the react component which is from respective row data.

formatter: reactFormatter(<AudioPlayer
          id={rowData?.recordingId}
          src='' // {downloadCallRecording.data}
          filename='' // {downloadCallRecording.fileName}
        />
      ),

I have tried with different formatter options but it doesn't help me to achieve it. Mutator helps to render the 'No recordings available' as a plain text but it doesn't allow to render the HTML form of component.

It would be great and helpful to me, someone suggest a better way of handling this in tabulator?