How to display only cities names in Satellite view (google maps api)

I can’t control the lables display in satellite or hybrid view, but it work well when I not specific mapTypeId.

The styles not take effect if that mapTypeId is in satellite or hybrid.

Any help, thanks

  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapTypeId: 'satellite',
    disableDefaultUI: true,
    mapId: "4504f8b37365c3d0",
    // Disable various map features to only show city names.
    styles: [
    
    
      {
        featureType: "all",
        elementType: "labels",
        stylers: [{ visibility: "off" }],
      },
      {
        featureType: "administrative",
        elementType: "labels",
        stylers: [{ visibility: "on" }],
      },
      {
        featureType: "administrative.locality",
        elementType: "labels",
        stylers: [{ visibility: "on" }],
      },
    ],
  });

I tried to add disableDefaultUI: true,
but it doesn’t work