How to add Highchart in a custom widget

    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('highcharts-script', 'https://code.highcharts.com/maps/highmaps.js'),
            Js::make('highcharts-map-module', 'https://code.highcharts.com/maps/modules/map.js'),
            Js::make('highcharts-world-map', 'https://code.highcharts.com/mapdata/custom/world.js'),
        ]);
    }

<x-filament-widgets::widget>
    <x-filament::section>
        <div id="container-map" style="width: 100%; height: 400px;"></div>
    </x-filament::section>
</x-filament-widgets::widget>

<div
    x-data="{}"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('highcharts-script')), @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('highcharts-world-map'))]"
>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Highcharts.mapChart('container-map', {
                chart: {
                    map: 'custom/world'
                },
                title: {
                    text: 'Mapa interactivo con Highcharts'
                },
                series: [{
                    name: 'Países',
                    color: '#E0E0E0',
                    enableMouseTracking: true
                }]
            });
        });
    </script>
</div>