Kml layer not showing areas on react-google-maps

i am using react-google-maps maps to show maps. I'ts showing perfectely fine the maps. I also need to add KML layer to to show Areas highlighted. AS i tried this Code. but its not showing my areas highlighted.

import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from "react-places-autocomplete";
import React, { useState } from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Polyline,
  KmlLayer,
  Marker,
} from "react-google-maps";

const Map = () => {
  const [address, setAddress] = useState("frasthar");
  const [latlng, setLat] = useState();
  console.log({ latlng });
  const handleChange = (address) => {
    setAddress(address);
  };
  const handleSelect = (address) => {
    setAddress(address);

    geocodeByAddress(address)
      .then((results) => getLatLng(results[0]))
      .then((latLng) => {
        setLat(latLng);
      })
      .catch((error) => console.error("Error", error));
  };

  return (
    <React.Fragment>
      <PlacesAutocomplete
        value={address}
        onChange={handleChange}
        onSelect={handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              type="text"
              className=""
              {...getInputProps({
                placeholder: "Enter Google Map Location",
              })}
            />

            <div
              className="autocomplete-dropdown-container"
              style={{
                position: "absolute",
                zIndex: "1000",
                width: "76.99%",
              }}
            >
              {loading && <div>Loading...</div>}
              {suggestions.map((suggestion, key) => {
                const className = suggestion.active
                  ? "suggestion-item--active"
                  : "suggestion-item";
                const style = suggestion.active
                  ? { backgroundColor: "#fafafa", cursor: "pointer" }
                  : { backgroundColor: "#ffffff", cursor: "pointer" };
                return (
                  <div
                    key={key}
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style,
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
      <GoogleMap
        defaultZoom={12}
        defaultCenter={{
          lat: 39.8496,
          lng: -75.2557,
        }}
        center={{
          lat: latlng ? latlng.lat : 39.8496,
          lng: latlng ? latlng.lng : -75.2557,
        }}
        mapContainerStyle={{
          height: "70vh",
          width: "100%",
        }}
      >
        <Marker
          position={{
            lat: latlng ? latlng.lat : 39.8496,
            lng: latlng ? latlng.lng : -75.2557,
          }}
          icon={{
            path: "M12.75 0l-2.25 2.25 2.25 2.25-5.25 6h-5.25l4.125 4.125-6.375 8.452v0.923h0.923l8.452-6.375 4.125 4.125v-5.25l6-5.25 2.25 2.25 2.25-2.25-11.25-11.25zM10.5 12.75l-1.5-1.5 5.25-5.25 1.5 1.5-5.25 5.25z",
            fillColor: "#0000ff",
            fillOpacity: 1.0,
            strokeWeight: 0,
            scale: 1.25,
          }}
        />

        <KmlLayer url="./doc1.kml" options={{ preserveViewport: true }} />
      </GoogleMap>
    </React.Fragment>
  );
};

const GooGleMapp = () => {
  return (
    <React.Fragment>
      <MapComponent
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=myKey&v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px`, width: "500px" }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </React.Fragment>
  );
};
const MapComponent = withScriptjs(withGoogleMap(Map));
export default GooGleMapp;