I have a component with one chart, which after some apexchart updates started crashing the page in react (blank page), the console gives these errors, it seems to be caused by the xaxis option, because if I remove it, the graph appears and not it crashes the page.
I tried also to write directly the categories but nothing change.

"apexcharts": "4.2.0",
"react-apexcharts": "1.7.0",

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at apexcharts.common.js:6:517937
    at Array.map (<anonymous>)
    at t2.value (apexcharts.common.js:6:517861)
    at t2.value (apexcharts.common.js:38:35390)
    at react-apexcharts.min.js:1:4316
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24965:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24917:7)
    at commitPassiveMountEffects (react-dom.development.js:24905:3)

hook.js:608 
 The above error occurred in the <Charts> component:
    at Charts (http://localhost:5173/node_modules/.vite/deps/react-apexcharts.js?v=b00ff44d:10085:17)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at CardContent2 (http://localhost:5173/node_modules/.vite/deps/@mui_joy.js?v=b00ff44d:5208:17)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at Card2 (http://localhost:5173/node_modules/.vite/deps/@mui_joy.js?v=b00ff44d:4883:17)
    at ApprovalChart (http://localhost:5173/src/components/charts/Chart.tsx?t=1734539730639:38:26)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:1590:19)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:1590:19)
    at main
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:1590:19)
    at Home (http://localhost:5173/src/pages/Home.tsx?t=1734539730639:35:41)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b00ff44d:4069:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b00ff44d:4539:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b00ff44d:4482:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b00ff44d:5228:5)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-D4L2SSZU.js?v=b00ff44d:1647:45
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:1590:19)
    at App (http://localhost:5173/src/App.tsx?t=1734539730639:32:16)
    at AuthProvider (http://localhost:5173/node_modules/.vite/deps/react-oidc-context.js?v=b00ff44d:110:5)
    at DefaultPropsProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:2804:3)
    at RtlProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:2786:5)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:2742:5)
    at ThemeProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:2851:5)
    at CssVarsProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:3202:7)
    at StyledEngineProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DKGIQZRO.js?v=b00ff44d:40:5)

react-dom.development.js:12056 
 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at apexcharts.common.js:6:517937
    at Array.map (<anonymous>)
    at t2.value (apexcharts.common.js:6:517861)
    at t2.value (apexcharts.common.js:38:35390)
    at react-apexcharts.min.js:1:4316
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24965:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24930:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24917:7)
    at commitPassiveMountEffects (react-dom.development.js:24905:3)

Component.tsx

interface ChartProps{
  data: response;
}

function sortByDate(data: AggregateByCreatedAtResponse) {
  const i18n = getI18n(); 
  const dataArray = Object.entries(data.results);
  dataArray.sort((a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime());
  const formatDate = (date: string) => {
    const newDate = new Date(date);
    const locale = i18n.language; // Get the current language set in i18n
    return newDate.toLocaleDateString(locale, {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
  };

  const categories = dataArray.map(([date]) => formatDate(date));
  const seriesData = dataArray.map(([, value]) => value);
  return { seriesData, categories };
}

const ChartComponent: React.FC<ChartProps> = ({ data }) => {
  const { t } = useTranslation();
  const { seriesData, categories } = sortByDate(data);

  const chartOptions: ApexOptions = {
    chart: {
      type: 'line',
      height: 350,
    },
    xaxis: {
      type: 'datetime',
      categories: categories,
    },
    stroke: {
      curve: 'smooth',
    },
    title: {
      text: t('Chart.string'),
      align: 'left',
    },
  };

  const series = [
    {
      name: t('Text.string'),
      data: seriesData,
    },
  ];

  return (
    <Card variant="outlined" sx={{ minWidth: 275 }}>
      <CardContent>
        <Chart
          options={chartOptions}
          series={series}
          type="line"
          height={350}
          width={'100%'}
        />
      </CardContent>
    </Card>
  );
};

export default Chart;