1.6.0 problem to unmount radial charts

[2803media]

Here is my component with react apexcharts 1.6.0:

import React, { useEffect, useState, useRef } from "react";
import dynamic from "next/dynamic";
import { useTheme } from "next-themes";

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

const generateUniqueId = () =>
  `chart-${Math.random().toString(36).slice(2, 11)}`;

const ApexRadialBarChart = ({
  data,
  seriesName = "Hommes",
  color = "#FF1C6A",
  background = "#293450",
  gradientToColor = "#FF77A6",
  formatter = "%",
  displayValue = null, // Nouvelle valeur à afficher
  chartId = generateUniqueId(),
}) => {
  const [chartOptions, setChartOptions] = useState(null);
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const chartRef = useRef(null);

  useEffect(() => {
    setMounted(true);

    return () => {
      // Vérifiez si le graphique existe avant de tenter de le détruire
      if (chartRef.current?.chart) {
        try {
          chartRef.current.chart.destroy();
        } catch (error) {
          console.error("Erreur lors de la destruction du graphique :", error);
        }
      }
    };
  }, []);

  useEffect(() => {
    if (!mounted || data === undefined) return;

    const isDarkMode = resolvedTheme === "dark";

    const options = {
      chart: {
        height: 280,
        type: "radialBar",
        animations: {
          enabled: false,
        },
      },
      series: [data],
      colors: [color],
      plotOptions: {
        radialBar: {
          hollow: {
            margin: 0,
            size: "70%",
            background: background,
          },
          track: {
            dropShadow: {
              enabled: true,
              top: 2,
              left: 0,
              blur: 4,
              opacity: 0.15,
            },
          },
          dataLabels: {
            name: {
              offsetY: -10,
              color: isDarkMode ? "#D1D5DB" : "#fff",
              fontSize: "13px",
            },
            value: {
              color: isDarkMode ? "#D1D5DB" : "#fff",
              fontSize: "30px",
              show: true,
              formatter: function () {
                return displayValue + formatter; // Affichage de la valeur personnalisée
              },
            },
          },
        },
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "dark",
          type: "vertical",
          gradientToColors: [gradientToColor],
          stops: [0, 100],
        },
      },
      stroke: {
        lineCap: "round",
      },
      labels: [seriesName],
    };

    setChartOptions(options);
  }, [
    data,
    resolvedTheme,
    mounted,
    color,
    background,
    gradientToColor,
    displayValue,
  ]);

  if (!mounted || !data || !chartOptions || !chartOptions.series) return null;

  return (
    <div id={chartId}>
      <Chart
        ref={chartRef}
        options={chartOptions}
        series={chartOptions.series}
        type="radialBar"
        height={280}
      />
    </div>
  );
};

export default ApexRadialBarChart;

which gerate the error after the unmount of the component:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'node')

Call Stack
t.value
node_modules/apexcharts/dist/apexcharts.common.js (6:98245)
r.value
node_modules/apexcharts/dist/apexcharts.common.js (6:458312)
r.value
node_modules/apexcharts/dist/apexcharts.common.js (6:456932)
t.value
node_modules/apexcharts/dist/apexcharts.common.js (6:506317)
t.value
node_modules/apexcharts/dist/apexcharts.common.js (38:31427)
t.eval [as create]
node_modules/apexcharts/dist/apexcharts.common.js (6:5541)
eval
node_modules/apexcharts/dist/apexcharts.common.js (38:36423)
new Promise
<anonymous>
t.value
node_modules/apexcharts/dist/apexcharts.common.js (38:36352)
eval
node_modules/apexcharts/dist/apexcharts.common.js (38:40319)

for other types of charts like bar or lines it's working

It's maybe related to this version I guess

[junedchhipa]

Please create a codesandbox so it can be reproduced easily.