how can implement custom marker with text ?

[mojtabadarzi]

i want to implement this marker with text but didn't show text on map !
how can show text on map or implement a component instead of icon and text on map ?
MARKER

const markers = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'a-feature1',
        properties: {
          icon: PinBlack,
        },
        geometry: {
          type: 'Point',
          coordinates: [49.5871, 37.2182],
        },
      },
      {
        type: 'Feature',
        id: 'a-feature2',
        properties: {
          icon: PinBlack,
        },
        geometry: {
          type: 'Point',
          coordinates: [49.5878, 37.2689],
        },
      },
    ],
  }; 


<Mapbox.ShapeSource
          id="symbolLocationSource"
          hitbox={{width: 20, height: 20}}
          shape={markers}>
          {markers.features.map((feature) => (
            <Mapbox.SymbolLayer
              id={'symbolLocationSymbols' + feature.id}
              key={feature.id}
              minZoomLevel={1}
              style={{
                iconImage: feature?.properties?.icon,
                iconSize: 1,
                textColor: 'red',
                textField: '10$',
              }}
            />
          ))}
 </Mapbox.ShapeSource>