I am trying to draw a custom chart using a flat grid type data and I am not able to make it work with reportcomplete and prepareDataFunction.

I am trying to do something like this:
I am using react and highcharts. I have a flat dataset that has just 3 columns from, to and value to draw a sankey chart. I am having trouble firing the prepareDataFunction and the callbacks for the getData function.
 
constreportComplete= () => {

pivotRef.current?.flexmonster.off('reportComplete', reportComplete);
createChart();
};

constcreateChart= () => {
pivotRef.current?.flexmonster.highcharts?.getData(
// Creating and configuring the chart
{
prepareDataFunction:function (input, _options) {
constdata=convertData(input.data);
console.log('data', data);
constchartOptions= {
series: [
{
data,
type:'sankey',
name:'Sankey demo series',
},
],
};
return chartOptions;
},
},
function (chartConfig) {
setChartOptions(chartConfig);
},
function (chartConfig) {
setChartOptions(chartConfig);
}
);
};

// flex moster configuration

<FlexmonsterReact.Pivot
toolbar={true}
ref={pivotRef}
licenseKey="key"
reportcomplete={reportComplete}
report={{
dataSource: {
type:'api',
url:'https://localhost:44351/api/reporting',
index:'sankey-dataset',
},
options: {
grid: {
type:'flat',
showGrandTotals:false,
showTotals:false,
},
},
slice: {
rows: [
{
uniqueName:'From',
},
{
uniqueName:'To',
},
{
uniqueName:'Value',
},
],
},
}}
/>
{chartOptions && <HighchartsReacthighcharts={Highcharts}options={chartOptions}/>}