Anychart AnyMap add dynamic table of legend

I want to use Anychart/Anymap in a dashboard, divided in two parts :

1. First part the dynamic heat map (choropleth)

2. Second part : generate a table of the map dataset (which are integrate in the script):

   • The table should automatically integrate the data from the dataset var of the map. With one change (first row has the columns names for more clarity).
   • The table have dynamic rows so when I click on one row (lets say the name of a country in the world map), the row is highlighted and the selected country is shown with its color in the map, with all the remaining countries grayed. Same thing if I click on the country on the map, all the remaining countries are grayed the corresponding row of the table (of the selected country) is highlighted.

This is a simple example of the dashboard, I was not able to make the "dataTable" table read the dataset of the map "var mapData" and show them ([mapData.name, mapData.value, mapData.population] did not work). And I do not want to integrate the data manually in the Table.

    <script>
        anychart.onDocumentReady(function () {
            // Sample data for the map and table
            var mapData = [
                { id: "US", value: 100, name: "United States", population: "330M" },
                { id: "CA", value: 50, name: "Canada", population: "38M" },
                { id: "MX", value: 75, name: "Mexico", population: "128M" }
            ];

            // Create a table layout
            var tableLayout = anychart.standalones.table();
            tableLayout.container("container");
            tableLayout.rowsCount(1); // Two rows
            tableLayout.colsCount(2); // One column
            tableLayout.cellBorder(false);

            // Create a map chart
            var map = anychart.map();
            map.geoData(anychart.maps.world);
            map.title("World Map with Data");

            var series = map.choropleth(mapData);
            series.labels(false); // Disable labels on the map for clarity

            // Create a data table to display selected region info
            var dataTable = anychart.standalones.table();
            dataTable.contents([
                ["Country", "Value", "Population"], // Table headers
                [mapData.name, mapData.value, mapData.population]
            ]);
            dataTable.width("100%");
            dataTable.height("100%");
            dataTable.cellBorder(true);
            dataTable.hAlign("center");
            dataTable.vAlign("middle");

            // Add the map to the first cell of the table layout
            //tableLayout.contents(map);

            // Add the data table to the second cell of the table layout
            //tableLayout.contents(dataTable);
  
            // Set contents.
            tableLayout.contents([
                    [map,dataTable]
            ]);
  
            // Handle click events on map regions to update the data table
            series.listen("pointClick", function (e) {
                var clickedRegion = e.point.get("id");
                var regionData = mapData.find(d => d.id === clickedRegion);

                if (regionData) {
                    dataTable.contents([
                        ["Country", "Value", "Population"], // Table headers
                        [regionData.name, regionData.value, regionData.population]
                    ]);
                } else {
                    dataTable.contents([
                        ["Country", "Value", "Population"],
                        ["N/A", "N/A", "N/A"]
                    ]);
                }
            });

            // Draw the table layout
            tableLayout.draw();
        });
    </script>