IgrGrid detailTemplate not re-rendering when state updates in React function

[zdrawku]

When using IgrGrid with a detailTemplate that contains charts that depend on state variables, the charts within the detail template do not update when the underlying data changes, even though the state is properly updated via useEffect.

Sample attached.

Code:

MFS Demo (2)_react.zip

const gridDetailTemplate = () => {
  return (
    <>
      <div className={classes("row-layout group")}>
        <ReactApexChart series={series} type="area" options={options} className={classes("apex-chart")}></ReactApexChart>
        <ReactApexChart series={series1} type="bar" options={options1} className={classes("apex-chart")}></ReactApexChart>
        <ReactApexChart series={series2} type="pie" options={options2} className={classes("apex-chart")}></ReactApexChart>
      </div>
    </>
  )
}

// State updates work correctly
useEffect(() => {
  setSeries(getSeries());
  setSeries1(getSeries1());
  setSeries2(getSeries2());
}, [box_Office_Revenue]);

// But the template doesn't re-render
<IgrGrid data={northwindEmployees} primaryKey="employeeID" detailTemplate={gridDetailTemplate} />