Issues with Google Maps Javascript API, Marker and Polylines NOT SHOWING together on a React.js App

I am pretty sure the states and setState stuff are correct, so here is my code. What I did here was I assigned the map key with the function this.initMap(). To have a detailed look:

class Radar extends Component{
    constructor(props){
        super(props)
        //initialize methods here
        this.googleMap = React.createRef()

        //define states here
        this.state = {
            cityname:this.props.datasource.name,
            cityCoordinates:[this.props.datasource.coord.lon, this.props.datasource.coord.lat],
            winddirection:this.props.datasource.wind.deg,
            cityPool:[],
            borderLine:[]
        }
}


initMap(){
    return new window.google.maps.Map(this.googleMap.current,{
        zoom: 7.5,
        center:{ lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
      disableDefaultUI: true,
    })
}

targetedCityMarker(){
    new window.google.maps.Marker({
        position: { lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
        map:this.initMap()
    })
}

cityPoolPolyLine(){
    let citypool_coordinates=[]
    this.state.cityPool.map((i)=>{
        citypool_coordinates.push(i.location)
        return citypool_coordinates
    })

    console.log(this.state.borderLine)   
    console.log(citypool_coordinates)    
    new window.google.maps.Polyline({
        path: this.state.borderLine,
        geodesic: true,
        strokeColor: "#2AA181",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:this.initMap()
      });
}

componentDidMount(){
    axios.get('http://localhost:5000/weather/radar').then((res)=>{
        console.log(res.data)
        this.setState({
            cityPool:res.data
        })
    })

    axios.get('http://localhost:5000/weather/radar_2').then((res)=>{
        this.setState({
            borderLine:res.data
        })
    })

    const MapCode = document.createElement('script')
    MapCode.src =`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=&v=weekly`
    window.document.body.appendChild(MapCode)
    

    MapCode.addEventListener('load', ()=>{
        this.initMap()
        this.targetedCityMarker()
        setTimeout(()=>{
            this.cityPoolPolyLine()
        },4000)
    })
}
    
    render(){
        return(
            <div className='radar-page'>
                <h1>Weather Radar</h1>
                <p>City Name: {this.state.cityname}</p>
                <p>City Coordinates:Lon: {this.state.cityCoordinates[0]}, Lat: {this.state.cityCoordinates[1]}</p>
                <p>Wind Direction: {this.state.winddirection}˚ </p>
                <p>Selected Cities: * Write a query, setup the range, greater or less than the chosen city's coordinates *</p>
                <div id="google-map" ref={this.googleMap} style={{ width: '500px', height: '400px' }} />
            </div>
        )
    }
}

export default Radar

Is my use of this.initMap() correct? My instinct tells me this line or some of my confusion in regard with OOP is causing some troubles. So once I run, it shows the marker first with no polyline, and then the marker disappears but the poly line shows up.