Javascript Scattermapbox Adding Text On Markers Issue

Hi, I am trying to add text on markers by using Plotly Js. However, I can not display the text on markers. I can see it by hovering on markers. Is there anyone that knows how to handle this? I am adding the code.

 var geoJSON = "{% static 'data/mergedfile.json' %}" // data

            var markerPoints = {{map_view_data|safe}} // marker data from backend
            
            var data = [{
              type: "choroplethmapbox", 
              locations: [], 
              featureidkey:'properties.COUNTRY',
              z: [],
              geojson: geoJSON,
              showscale:false,
              autocolorscale:false,
              colorscale:[[0, 'rgb(1,49,125)'], [1, 'rgb(1,49,125)']],
              marker:{opacity:0.8},
              name:'',
              hovertemplate:'',
            }]; // choroplethmapbox chart
        
        
            var generateMarkerPointData = function (plotlyData, markerPoint) {
                    /*
                     * generate a data structure to show marker point on the map and add the generated data structure to plotly data list
                    */

                    // push the first marker
                    plotlyData.push({
                        type: "scattermapbox",
                        lon: [markerPoint.latLng[1]], lat: [markerPoint.latLng[0]],
                        marker: { size: 20, color: markerPoint.color },
                        showlegend: false,
                        customdata: [markerPoint],
                        name: '',
                        hovertemplate: '',
                        mode: 'markers+text',
                        text: markerPoint.employee_count,
                        hoverinfo: "all",
                        //hovertext:markerPoint.employee_count,
                        texttemplate:'%{z}',
                        textposition:'top center'
                    })

                    // push the second marker for highlighting
                    plotlyData.push({
                        type: "scattermapbox",
                        lon: [markerPoint.latLng[1]], lat: [markerPoint.latLng[0]],
                        marker: { size: 33, color: markerPoint.color, opacity: 0.4 },
                        showlegend: false,
                        customdata: [markerPoint],
                        name: '',
                        hovertemplate: '',
                        mode: 'markers+text',
                        text: markerPoint.employee_count,
                        hoverinfo: "all",
                        //hovertext:markerPoint.employee_count,
                        texttemplate:'%{z}',
                        textposition:'top center'
                    })
                }
        
        
            markerPoints.forEach(x => generateMarkerPointData(data,x))
            
                var layout = { 
                    mapbox: { center: { lat: markerPoints[0].latLng[0], lon: markerPoints[0].latLng[1] }, zoom: 14, style: 'stamen-terrain' },
                    margin: { r: 0, t: 0, l: 0, b: 0, autoexpand: false } };

                var config = {};
            
            var myPlot = document.getElementById('project-detail-puantaj-map-view-map');
            
            Plotly.newPlot(myPlot, data, layout, config); // draw chart on html