I use MapBox-GL-JS for display markers in map. In my component I have have prop for markers, which are same (visual), but different number (center of marker icon). Is it possible to generate same icon with different number for display all markers? And how can select correct icon depend on marker ? I know that I can use Marker (out of mapBox canvas) but there is performance issue.

<Map
            style="mapbox://styles/mapbox/streets-v8"
            zoom={[8]}
            containerStyle={{
                height: '100vh',
                width: '100vw'
            }}
            onStyleLoad={this.onMapLoad}
            center={[this.props.markers[0].position!.lat, this.props.markers[0].position!.lng]}
        >
            <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-11", "icon-allow-overlap": true }}>
                {this.props.markers.map((marker) => {
                        return marker.position ? <Feature coordinates={[marker.position.lat,marker.position.lng]} /> : <div>x</div>
                    })}
            </Layer>
        </Map>