Edit in JSFiddle

// Create a Leaflet map with default view centered at [0, 0] and zoom level 1
var map = L.map('my-map').setView([0, 0], 1);

// Replace the API key with your actual Geoapify API Key obtained from https://myprojects.geoapify.com
var myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// Determine if the device has a Retina display to load appropriate map tiles
var isRetina = L.Browser.retina;

// Define the base URLs for standard and Retina-quality map tiles
var baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
var retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// Add a base map layer using Geoapify's OSM Bright map style
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
  attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a>  <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors',
  apiKey: myAPIKey,
  maxZoom: 20,
  id: 'osm-bright',
}).addTo(map);

// Specify the place (e.g., "California") for which you want to retrieve administrative boundaries
const place = "California, US";

// Call the function to fetch administrative divisions using Geoapify's Geocoding API
getAdministrativeDivisions(place);

async function getAdministrativeDivisions(place) {
  // Fetch place data (including place ID and bounding box) using Geoapify's Geocoding API
  const placeData = await fetch(`https://api.geoapify.com/v1/geocode/search?text=${encodeURIComponent(place)}&limit=1&apiKey=${myAPIKey}`).then(result => result.json());

  if (placeData && placeData.features.length) {
    // Extract place ID and bounding box from the API response
    const placeId = placeData.features[0].properties.place_id;
    const bbox = placeData.features[0].bbox;

    // Adjust the map view to fit the bounding box of the place
    map.fitBounds([
      [bbox[1], bbox[0]],
      [bbox[3], bbox[2]]
    ]);

    // Fetch place geometry or boundary using Geoapify's Places API
    const placeDetailsData = await fetch(`https://api.geoapify.com/v2/place-details?id=${placeId}&features=details&apiKey=${myAPIKey}`).then(result => result.json());

    if (placeDetailsData && placeDetailsData.features.find(feature => feature.properties.feature_type === 'details')) {
      // Display the place details boundary on the map using Leaflet's geoJSON layer
      L.geoJSON(placeDetailsData, {
        style: (feature) => {
          return {
            stroke: true,
            fill: false,
            color: '#3e3be3',
            weight: 4,
            opacity: 0.7,
            smoothFactor: 0.5,
            interactive: false
          };
        }
      }).addTo(map);
    } else {
      console.log("Place Details are not found");
    }

    // Fetch administrative divisions using Geoapify's Boundaries API
    const divisionsData = await fetch(`https://api.geoapify.com/v1/boundaries/consists-of?id=${placeId}&geometry=geometry_1000&apiKey=${myAPIKey}`).then(result => result.json());

    if (divisionsData) {
      // Display the administrative divisions boundary on the map using Leaflet's geoJSON layer
      const divisionsLayer = L.geoJSON(divisionsData, {
        style: (feature) => {
          return {
            stroke: true,
            fill: true,
            fillColor: '#a4a3f0',
            fillOpacity: 0.15,
            color: '#3e3be3',
            weight: 2,
            opacity: 0.7,
            smoothFactor: 0.5,
            interactive: false
          };
        }
      }).addTo(map);
    }
  } else {
    console.log("Place is not found");
  }
}

<div id="my-map"></div>

html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}