Python plotly dropdown not working in HTML, Dropdown event is not getting triggered

I have created a Plotly chart in Python with a drop-down and exported the chart to JSON. Then storing that JSON in the database. After that render chart JSON in HTML. In HTML dropdown within a chart is not working means when I select any dropdown value chart is not changing according to that selection. Following is my Python Plotly chart code. Following is the code for Plotly

import pandas as pd
import plotly.express as px
import json


    # Create the data table
    data = {
        'Country': ['United States', 'United States', 'United States', 'United States', 'United States', 'United States',
            'United States', 'United States', 'United States', 'China', 'China', 'China', 'China', 'China', 'China',
            'China', 'China', 'China', 'India', 'India', 'India', 'India', 'India', 'India', 'India', 'India',
            'India', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia', 'Indonesia'],
        'State': ['California', 'California', 'California', 'Texas', 'Texas', 'Texas', 'New York', 'New York', 'New York',
            'Guangdong', 'Guangdong', 'Guangdong', 'Shandong', 'Shandong', 'Shandong', 'Henan', 'Henan', 'Henan',
            'Uttar Pradesh', 'Uttar Pradesh', 'Uttar Pradesh', 'Maharashtra', 'Maharashtra', 'Maharashtra', 'Bihar',
            'Bihar', 'Bihar', 'Jakarta', 'Jakarta', 'Jakarta', 'West Java', 'West Java', 'West Java'],
        'Race': ['White', 'Hispanic', 'Asian', 'White', 'Hispanic', 'African-American', 'White', 'African-American', 'Asian',
            'Han Chinese', 'Zhuang', 'Yao', 'Han Chinese', 'Hui', 'Manchu', 'Han Chinese', 'Uighur', 'Korean',
            'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian', 'Mongoloid', 'Indo-Aryan', 'Dravidian',
            'Mongoloid', 'Javanese', 'Sundanese', 'Betawi', 'Sundanese', 'Javanese', 'Betawi'],
        'Population': [20000000, 10000000, 8000000, 15000000, 5000000, 3000000, 12000000, 8000000, 4000000, 100000000,
            5000000, 3000000, 80000000, 6000000, 4000000, 75000000, 4000000, 3000000, 180000000, 120000000,
            10000000, 100000000, 60000000, 5000000, 90000000, 75000000, 5000000, 10000000, 7000000, 4000000,
            25000000, 10000000, 4000000],
        'Weight %': [50, 25, 20, 60, 20, 12, 45, 30, 15, 90, 4.5, 2.5, 85, 6, 4, 88, 4.7, 3.5, 55, 37, 3, 60, 35, 3, 50,
            40, 4, 40, 28, 16, 60, 25, 10]
    }

 

    df = pd.DataFrame(data)

 

    # Create the treemap
    fig = px.treemap(df, path=['Country', 'State', 'Race'], values='Population', color='Population', color_continuous_scale='RdBu', title='Population Treemap')

 

    # Set the color bar title
    fig.update_layout(coloraxis_colorbar_title='<b>Population</b>')


    # Set the title
    fig.update_layout(title={'text': '<b>Population by Race in Top States of Different Countries</b>', 'font': {'color': '#283347'}})


    # Customize hover labels
    fig.data[0].hovertemplate = '<b>%{label}</b><br>Population: %{value:,}<br>Weight %: %{customdata:.2f}%'
 

    # Remove parent and ID fields from hover
    fig.data[0].hovertemplate = fig.data[0].hovertemplate.replace('%{parent}<br>', '').replace('%{id}<br>', '')

 

    # Display the treemap
    # fig.show()

 

    # Create dropdown options
    dropdown_options = [
        {'label': 'Group by Country', 'value': ['Country', 'State', 'Race']},
        {'label': 'Group by Race', 'value': ['Race', 'Country', 'State']}
    ]


    # Define a callback function to update the treemap based on dropdown selection
    def update_treemap(selected_option):
        fig.update_traces(path=selected_option)


    # Add dropdown menu
    update_menus = [
        {
            'buttons': [
                {'method': 'relayout', 'label': option['label'], 'args': [{'treemap.path': option['value']}]}
                for option in dropdown_options
            ],
            'direction': 'down',
            'showactive': True,
            'x': 0.1,
            'y': 1.07
        }
    ]
    fig.update_layout(updatemenus=update_menus)

    # Save the chart data as JSON
    chart_data_json = fig.to_json()

    #store chart_data_json to postgres

Then Store the JSON output in RDBMS and get it to render on HTML. Following is the HTML file

<!DOCTYPE html>
<html>
<head>
    <title>Plotly Chart</title>
    <!-- Include plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <!-- Container for the chart -->
    <div id="chart-container"></div>

    <!-- Load and render the chart using JavaScript -->
    <script>
        var chartData = '{"data":[{"branchvalues":"total","customdata":[[8000000.0],[3000000.0],[8000000.0],[4000000.0],[4000000.0],[4000000.0],[75000000.0],[60000000.0],[120000000.0],[100000000.0],[75000000.0],[80000000.0],[10000000.0],[5000000.0],[6000000.0],[90000000.0],[100000000.0],[180000000.0],[10000000.0],[10000000.0],[3000000.0],[4000000.0],[5000000.0],[5000000.0],[10000000.0],[7000000.0],[25000000.0],[4000000.0],[20000000.0],[12000000.0],[15000000.0],[3000000.0],[5000000.0],[80882352.94117647],[14842105.263157895],[92907407.4074074],[68902439.02439025],[7857142.857142857],[82575757.57575758],[9333333.333333334],[71688888.8888889],[11260869.56521739],[151290322.58064517],[19000000.0],[79057142.85714285],[115155038.75968993],[15100000.0],[12317647.05882353]],"domain":{"x":[0.0,1.0],"y":[0.0,1.0]},"hovertemplate":"\\u003cb\\u003e%{label}\\u003c\\u002fb\\u003e\\u003cbr\\u003ePopulation: %{value:,}\\u003cbr\\u003eWeight %: %{customdata:.2f}%","ids":["United States\\u002fNew York\\u002fAfrican-American","United States\\u002fTexas\\u002fAfrican-American","United States\\u002fCalifornia\\u002fAsian","United States\\u002fNew York\\u002fAsian","Indonesia\\u002fJakarta\\u002fBetawi","Indonesia\\u002fWest Java\\u002fBetawi","India\\u002fBihar\\u002fDravidian","India\\u002fMaharashtra\\u002fDravidian","India\\u002fUttar Pradesh\\u002fDravidian","China\\u002fGuangdong\\u002fHan Chinese","China\\u002fHenan\\u002fHan Chinese","China\\u002fShandong\\u002fHan Chinese","United States\\u002fCalifornia\\u002fHispanic","United States\\u002fTexas\\u002fHispanic","China\\u002fShandong\\u002fHui","India\\u002fBihar\\u002fIndo-Aryan","India\\u002fMaharashtra\\u002fIndo-Aryan","India\\u002fUttar Pradesh\\u002fIndo-Aryan","Indonesia\\u002fJakarta\\u002fJavanese","Indonesia\\u002fWest Java\\u002fJavanese","China\\u002fHenan\\u002fKorean","China\\u002fShandong\\u002fManchu","India\\u002fBihar\\u002fMongoloid","India\\u002fMaharashtra\\u002fMongoloid","India\\u002fUttar Pradesh\\u002fMongoloid","Indonesia\\u002fJakarta\\u002fSundanese","Indonesia\\u002fWest Java\\u002fSundanese","China\\u002fHenan\\u002fUighur","United States\\u002fCalifornia\\u002fWhite","United States\\u002fNew York\\u002fWhite","United States\\u002fTexas\\u002fWhite","China\\u002fGuangdong\\u002fYao","China\\u002fGuangdong\\u002fZhuang","India\\u002fBihar","United States\\u002fCalifornia","China\\u002fGuangdong","China\\u002fHenan","Indonesia\\u002fJakarta","India\\u002fMaharashtra","United States\\u002fNew York","China\\u002fShandong","United States\\u002fTexas","India\\u002fUttar Pradesh","Indonesia\\u002fWest Java","China","India","Indonesia","United States"],"labels":["African-American","African-American","Asian","Asian","Betawi","Betawi","Dravidian","Dravidian","Dravidian","Han Chinese","Han Chinese","Han Chinese","Hispanic","Hispanic","Hui","Indo-Aryan","Indo-Aryan","Indo-Aryan","Javanese","Javanese","Korean","Manchu","Mongoloid","Mongoloid","Mongoloid","Sundanese","Sundanese","Uighur","White","White","White","Yao","Zhuang","Bihar","California","Guangdong","Henan","Jakarta","Maharashtra","New York","Shandong","Texas","Uttar Pradesh","West Java","China","India","Indonesia","United States"],"marker":{"coloraxis":"coloraxis","colors":[8000000.0,3000000.0,8000000.0,4000000.0,4000000.0,4000000.0,75000000.0,60000000.0,120000000.0,100000000.0,75000000.0,80000000.0,10000000.0,5000000.0,6000000.0,90000000.0,100000000.0,180000000.0,10000000.0,10000000.0,3000000.0,4000000.0,5000000.0,5000000.0,10000000.0,7000000.0,25000000.0,4000000.0,20000000.0,12000000.0,15000000.0,3000000.0,5000000.0,80882352.94117647,14842105.263157895,92907407.4074074,68902439.02439025,7857142.857142857,82575757.57575758,9333333.333333334,71688888.8888889,11260869.56521739,151290322.58064517,19000000.0,79057142.85714285,115155038.75968993,15100000.0,12317647.05882353]},"name":"","parents":["United States\\u002fNew York","United States\\u002fTexas","United States\\u002fCalifornia","United States\\u002fNew York","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","China\\u002fGuangdong","China\\u002fHenan","China\\u002fShandong","United States\\u002fCalifornia","United States\\u002fTexas","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","China\\u002fShandong","India\\u002fBihar","India\\u002fMaharashtra","India\\u002fUttar Pradesh","Indonesia\\u002fJakarta","Indonesia\\u002fWest Java","China\\u002fHenan","United States\\u002fCalifornia","United States\\u002fNew York","United States\\u002fTexas","China\\u002fGuangdong","China\\u002fGuangdong","India","United States","China","China","Indonesia","India","United States","China","United States","India","Indonesia","","","",""],"values":[8000000,3000000,8000000,4000000,4000000,4000000,75000000,60000000,120000000,100000000,75000000,80000000,10000000,5000000,6000000,90000000,100000000,180000000,10000000,10000000,3000000,4000000,5000000,5000000,10000000,7000000,25000000,4000000,20000000,12000000,15000000,3000000,5000000,170000000,38000000,108000000,82000000,21000000,165000000,24000000,90000000,23000000,310000000,39000000,280000000,645000000,60000000,85000000],"type":"treemap"}],"layout":{"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"coloraxis":{"colorbar":{"title":{"text":"\\u003cb\\u003ePopulation\\u003c\\u002fb\\u003e"}},"colorscale":[[0.0,"rgb(103,0,31)"],[0.1,"rgb(178,24,43)"],[0.2,"rgb(214,96,77)"],[0.3,"rgb(244,165,130)"],[0.4,"rgb(253,219,199)"],[0.5,"rgb(247,247,247)"],[0.6,"rgb(209,229,240)"],[0.7,"rgb(146,197,222)"],[0.8,"rgb(67,147,195)"],[0.9,"rgb(33,102,172)"],[1.0,"rgb(5,48,97)"]]},"legend":{"tracegroupgap":0},"title":{"text":"\\u003cb\\u003ePopulation by Race in Top States of Different Countries\\u003c\\u002fb\\u003e","font":{"color":"#283347"}},"updatemenus":[{"buttons":[{"args":[{"treemap.path":["Country","State","Race"]}],"label":"Group by Country","method":"relayout"},{"args":[{"treemap.path":["Race","Country","State"]}],"label":"Group by Race","method":"relayout"}],"direction":"down","showactive":true,"x":0.1,"y":1.07}]}}';

        chartData = JSON.parse(chartData);

        // Render the chart using plotly.js
        Plotly.newPlot('chart-container', chartData.data, chartData.layout);
    </script>
</body>
</html>