Next.js - how to dynamically import highcharts component?

I am using highcharts library with react-highcharts-official.

The highcharts component size is 99kb and I want to dynamically load it. However, everything I tried was a failure unfortunately.

This is how I use it now in my application

import * as Highcharts from "highcharts";
import ReactHighcharts from "highcharts-react-official";

<ReactHighcharts
    highcharts={Highcharts}
    options={treeConfig}
></ReactHighcharts>

Now I tried to remove the import of Highcharts and dynamically import it by doing this:

const Highcharts = dynamic(() => import('highcharts'));

Usually the above works, but with this library I get the following error:

rgument of type '() => Promise<{ default: typeof import("C:/app/node_modules/highcharts/highcharts"); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'. Type '() => Promise<{ default: typeof import("C:/app/node_modules/highcharts/highcharts"); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }>' is not assignable to type '() => LoaderComponent<{}>'. Type 'Promise<{ default: typeof import("C:/app/node_modules/highcharts/highcharts"); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }>' is not assignable to type 'LoaderComponent<{}>'. Type '{ default: typeof import("C:/app/node_modules/highcharts/highcharts"); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'. Type '{ default: typeof import("C:/app/node_modules/highcharts/highcharts"); addEvent(el: T | Class, type: string, fn: Function | EventCallbackFunction, options?: EventOptionsObject | undefined): Function; ... 84 more ...; SeriesPalettes: any; }' is not assignable to type '{ default: ComponentType<{}>; }'. Types of property 'default' are incompatible. Type 'typeof import("C:/app/node_modules/highcharts/highcharts")' is not assignable to type 'ComponentType<{}>'

Do you know why it happens? I also tried to use this:

const Highcharts = dynamic(() => import('highcharts') as any) ;

It removes the error but I see nothing in my application (the component is not rendered).