Preventing the map labels to overlap when adding custom markers with labels in React Map GL

Question

I'm using react-map-gl with maplibre-gl to render a map on a React application. I'm simply trying to add a custom marker with a label next to it.

The problem is that they overlap with the actual map labels and symbols (see picture):

The marker is stored in an atom state and is added to the map programmatically after the user clicks on the search places suggestion. This is how I initialize the app:

<MapView
  id="map"
  initialViewState={{
    longitude: 146.6639,
    latitude: -42.6685,
    zoom: 11,
  }}
  mapStyle={`https://api.maptiler.com/maps/outdoor-v2/style.json?key=...`}
  style={{ flex: 1 }}
>
  {marker && (
    <Marker
      latitude={marker.latitude}
      longitude={marker.longitude}
      anchor="bottom"
    >
      <MarkerCustom label={marker.label} />
    </Marker>
  )}
</MapView>;

I've tried to offset and set the anchoring, even though it prevents the marker from completely overlapping, it's still quite bad to look at it. I wonder if there's a way to completely hide the main label when the marker overlaps on it?