Mapbox: Text of the point/circle behind is visible over the point in front

I want to show the points and to write data inside. Problem is that the data (numbers) are shown for the points behind instead of the ones in front.

I would also like for smaller number circles to disappear on zoom lvl xx.

This is my code:
useEffect(() => {
if (mapRef.current) return;

mapboxgl.accessToken =
  "pk.eyJ1IjoibHVrYXZpNDQiLCJhIjoiY2xieGlkMDl1MDdhbTNvcm1sbThoa2N3ZSJ9.xRmYD6lKyJrGlwUUrzHZFA";

mapRef.current = new mapboxgl.Map({
  container: mapContainerRef.current,
  style: "mapbox://styles/mapbox/light-v10",
  center: [lng, lat],
  zoom: zoom,
});

mapRef.current.on("load", async () => {
  const coordinatesPromises = institutions.map((institution) =>
    getCoordinates(institution.address)
  );
  const coordinates = await Promise.all(coordinatesPromises);
  const geojsonData = {
    type: "FeatureCollection",
    features: institutions.map((institution, index) => ({
      type: "Feature",
      properties: {
        institutionName: institution.name,
        site: institution.address,
        employees: institution.employees,
        type: institution.type,
        network: institution.network,
        category: institution.category,
        speciality: institution.speciality,
      },
      geometry: {
        type: "Point",
        coordinates: [coordinates[index]?.lng, coordinates[index]?.lat],
      },
    })),
  };

  mapRef.current.addSource("points", {
    type: "geojson",
    data: geojsonData,
  });

  mapRef.current.addLayer({
    id: "circle",
    type: "circle",
    source: "points",
    paint: {
      "circle-color": "#82c5f1",
      "circle-radius": [
        "interpolate",
        ["linear"],
        ["get", "employees"],
        0,
        5,
        100,
        10,
        200,
        15,
        500,
        20,
        1000,
        25,
        2000,
        30,
      ],
      "circle-stroke-width": 2,
      "circle-stroke-color": "#ffffff",
      "circle-opacity": [
        "interpolate",
        ["linear"],
        ["zoom"],
        0,
        ["case", ["<", ["get", "employees"], 500], 0, 0],
        10,
        ["case", [">", ["get", "employees"], 500], 1, 1],
      ],
    },
    layout: {},
  });

  mapRef.current.addLayer({
    id: "labels",
    type: "symbol",
    source: "points",
    layout: {
      "text-field": ["get", "employees"],
      "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
      "text-weight": "bold",
      "text-size": 12,
      "text-align": "center",
      "text-anchor": "center",
      "text-justify": "center",
      "text-offset": [0, 0],
      "symbol-z-order": "auto",
      "icon-allow-overlap": false,
      "icon-ignore-placement": false,
      "text-optional": true,
      "symbol-sort-key": ["get", "employees"],
    },
    paint: {
      "text-color": "#ffffff",
    },
  });

  mapRef.current.on("click", "circle", (e: any) => {
    mapRef.current.flyTo({
      center: e.features[0].geometry.coordinates,
      zoom: 15,
      essential: true,
    });
    console.log(e.features[0]);
    setSelectedFeature(e.features[0]);
  });

  mapRef.current.on("mouseenter", "circle", () => {
    mapRef.current.getCanvas().style.cursor = "pointer";
  });

  mapRef.current.on("mouseleave", "circle", () => {
    mapRef.current.getCanvas().style.cursor = "";
  });
});

}, [lng, lat, zoom]);

I have tried multiple combinations of properties in layout and nothing led to success.