React - How to force reload class Component?

I need to reload Google Map on click function. I've click event which will get the data from API and that data should reload in Google Map.

Here is my Dashboard.js

import React, { Component } from 'react';
import Map from './Gmap';
import MapHelpBar from '../common/MapHelpBar';
import StationList from './StationList';
import { getStations } from '../../api/StationApi';
import Constants from '../../utils/constants';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stations: [],
      markerClass: '',
    };
  }

  componentDidMount() {
    getStations().then(res => res).then(result => {
      if (result) {
        this.setState({ stations: result});
      }
    });
  }

  callStation = async (data, clickedIndex) => {
    getStations().then(res => res).then(response => {
      let stationArr = [];
      for (let i = 0; i < response.length; i++) {
        if (data === Constants.stationStatus.charging) {
          const statusCharging = response[i].connectors.every((status) => {
            if (data === status.status) {
              return true;
            }
          });
          if (statusCharging === true) {
            stationArr.push(response[i]);
          }
        }

        if (data === Constants.stationStatus.faulted) {
          const statusFaulated = response[i].connectors.some((status) => {
            if (data === status.status || Constants.stationStatus.damaged === status.status) {
              return true;
            }
          });
          if (statusFaulated === true) {
            stationArr.push(response[i]);
          }
        }

        if (data === Constants.stationStatus.ok) {
          const statusOk = response[i].connectors.some((status) => {
            if (data === status.status
                || Constants.stationStatus.available === status.status
                || Constants.stationStatus.preparing === status.status) {
              return true;
            }
          });
          if (statusOk === true) {
            stationArr.push(response[i]);
          }
        }
      }

      this.setState({ stations: stationArr});

      if (this.state.markerClass === clickedIndex) {
        this.setState({markerClass: 0});
        // setStations(response);
      } else {
        this.setState({markerClass: clickedIndex});
        // setStations(stationArr);
      }
    });
  }

  render () {
    return(
    <div>
      <div className="row">
        <div className="col-md-12 col-lg-12">
          <section className="panel">
            <div className="panel-body">
              <div className="row">
                <div className="col-lg-12">
                  {
                    this.state.stations.length > 0 ? <Map stations={this.state.stations} /> : null
                  }
                </div>
                <MapHelpBar clicked={this.callStation} clickedClassIndex={this.state.markerClass} />
              </div>
            </div>
          </section>
        </div>
      </div>
      {
        <StationList stations={this.state.stations} />
      }
  </div>
    )
  }
}

export default Dashboard

In Dashboard.js, StationList (StationList.js) is reload when click

<StationList stations={this.state.stations} />

but Map (Gmap.js) is not reload

<div className="col-lg-12">
 {
      this.state.stations.length > 0 ? <Map stations={this.state.stations} /> : null
 }
</div>

Here is my Gmap.js

import React, { Component } from "react";
import * as Config from "../../config/Config";
import StationGoogleMap from "../stations/StationGoogleMap";

class Gmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stations: [],
      selectedMarker: false,
      infoWindow: true,
    };
  }

  componentDidMount() {
    this.setState({ stations: this.props.stations });
  }
  handleClick = (marker, infoWindow) => {
    this.setState({ selectedMarker: marker });
    this.setState({ infoWindow: infoWindow });
  };

  render() {
    const googleMapURL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${process.env.REACT_APP_MAP_KEY}&libraries=geometry,drawing,places`;
    let mapBlock = null;

    let markers = this.state.stations;
    let latitude = Config.MAP_CONFIG.default_location.latitude;
    let longitude = Config.MAP_CONFIG.default_location.longitude;
    let defaultZoom = 8;

    let isStationDetailPage = false;

    if (this.props.id) {
      isStationDetailPage = true;
    }

    if (markers.length === 1) {
      latitude =
        markers[0].station_latitude !== null
          ? markers[0].station_latitude
          : latitude;
      longitude =
        markers[0].station_longitude !== null
          ? markers[0].station_longitude
          : longitude;
      defaultZoom = 12;
    }

    if (this.state.stations.length > 0) {
      mapBlock = (
        <StationGoogleMap
          selectedMarker={this.state.selectedMarker}
          markers={markers}
          onClick={this.handleClick}
          googleMapURL={googleMapURL}
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `400px` }} />}
          mapElement={<div style={{ height: `100%` }} />}
          // latitude={-34.617874}
          // longitude={-58.368587}
          latitude={latitude}
          longitude={longitude}
          defaultZoom={defaultZoom}
          infoWindow={this.state.infoWindow}
          isStationDetailPage={isStationDetailPage}
        />
      );
    }
    return mapBlock;
  }
}

Gmap.defaultProps = {
  id: '',
  stations:[]
}

export default Gmap;

Here is my MapHelpBar.js

import React from 'react';
import Constants from '../../utils/constants';
import Translations from '../../../translations.json';

function MapHelpBar(props) {
  return (
    <>
      <div className="col-lg-12">
        <div className="stations-map">
          <div className="flex-container">
            <div className="stations-details">
              {Translations.map.help.stations.display_label}
              :
            </div>
            <div className={props.clickedClassIndex === 1 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.charging, 1)}>
              <img src={`/img/${Constants.stationIcons.green}`} alt={Translations.station_detail.station_icons.green_icon} />
              {Translations.map.help.stations.status_list.charging}
            </div>
            <div className={props.clickedClassIndex === 2 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.faulted, 2)}>
              <img src={`/img/${Constants.stationIcons.red}`} alt={Translations.station_detail.station_icons.red_icon} />
              {Translations.map.help.stations.status_list.faulted}
            </div>
            <div className={props.clickedClassIndex === 3 ? 'stations-details active' : 'stations-details'} onClick={() => props.clicked(Translations.map.help.stations.status_list.ok, 3)}>
              <img src={`/img/${Constants.stationIcons.blue}`} alt={Translations.station_detail.station_icons.blue_icon} />
              {Translations.map.help.stations.status_list.ok}
            </div>
          </div>
        </div>
      </div>
      <div className="col-lg-12">
        <div className="stations-map">
          <div className="flex-container">
            <div className="stations-details">
              {Translations.map.help.connectors.display_label}
              :
            </div>
            <div className="stations-details">
              <span className="box-available" />
              {Translations.map.help.connectors.status_list.available}
            </div>
            <div className="stations-details">
              <span className="box-faulted" />
              {Translations.map.help.connectors.status_list.faulted}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default MapHelpBar;

Can anyone please help me to solve this issue ?