Issue with `react-apexcharts` after migrating from RR6 to RR7

[guelosuperstart]

Hello,

I'm using react-apexcharts with React and Remix, and I've encountered an issue while migrating from React Router v6 (RR6) to v7 (RR7). The following error occurs when rendering the <Chart> component:

TypeError: Cannot read properties of null (reading 'parentNode')
    at t2.value (react-apexcharts.js?v=a7223f81:9814:19)
    at react-apexcharts.js?v=a7223f81:10078:76
    at react-stack-bottom-frame (react-dom_client.js?v=a7223f81:16248:13)
    at runWithFiberInDEV (react-dom_client.js?v=a7223f81:726:18)
    at commitHookEffectListUnmount (react-dom_client.js?v=a7223f81:7809:90)
    at commitHookPassiveUnmountEffects (react-dom_client.js?v=a7223f81:7828:60)
    at disconnectPassiveEffect (react-dom_client.js?v=a7223f81:9491:13)
    at doubleInvokeEffectsOnFiber (react-dom_client.js?v=a7223f81:11282:78)
    at runWithFiberInDEV (react-dom_client.js?v=a7223f81:726:18)
    at recursivelyTraverseAndDoubleInvokeEffectsInDEV (react-dom_client.js?v=a7223f81:11253:78)

This error appears in the <Charts> component, and React attempts to recover the tree using the provided error boundary (RenderErrorBoundary).

Here’s a simplified version of my code:

// chart.ts
import { memo } from 'react';
import loadable, { type LoadableComponent } from '@loadable/component';
import { type ApexOptions } from 'apexcharts';

const Chart: LoadableComponent<ApexOptions> = loadable(() => import('react-apexcharts'));

export default memo(Chart);

// index.ts
export { default as useChart } from './chart';
export { default } from './chart';

// Component
import Chart from '~/components/chart';

<div className="h-24"><Chart {...option} /></div>

This setup worked without issues in RR6, but fails in RR7. I suspect the problem might be related to the unmounting or lifecycle changes introduced in RR7.

Could you please advise if there are any known compatibility issues or recommended workarounds for using react-apexcharts in RR7?

Thank you!