Google.maps.places.AutoComplete Suddenly Stops Working And Then Start Working On Refreshing The Page And Then Again Stops Working On Next Refresh

I just started working google maps and I just want to add two points on the map and draw a direction on it and also want to add radius so I can go for the uber algorithms.

When I first refresh the page after changing some code the google place doesn't show any of the suggestions and then on again refreshing it starts showing suggestions as I type in the field.

Here is the code for the auto complete in form.

import {
  addPointA,
  addPointB,
  addSpecialRoute
} from "../../../redux/routesSpecial/actions";
import {
  TextField,
  Grid,
  Checkbox,
  Button,
  FormControlLabel
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import Map from "views/Maps/Maps";
import { connect } from "react-redux";

const style = makeStyles(theme => ({
  container: {
    flexDirection: "row",
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 500
  },
  dense: {
    marginTop: 19
  },
  menu: {
    width: 200
  },
  button: {
    height: 40,
    width: 100,
    marginTop: 50,
    left: 50,
    backgroundColor: "black"
  },
  text: {
    color: "white"
  }
}));

class addSpecialRoutes extends PureComponent {
  static propTypes = {};
  constructor(props) {
    super(props);
    this.state = {
      pointA: "",
      pointB: "",
      address: "",
      send: false
    };
    this.fillInAddressA = this.fillInAddressA.bind(this);
    this.fillInAddressB = this.fillInAddressB.bind(this);
  }

  componentDidMount() {
    this.initAutocompleteA();
    this.initAutocompleteB();
  }

  initAutocompleteA() {
    const input = document.getElementById("pointAPlaces");
    const google = window.google;
    this.autocompleteA = new google.maps.places.Autocomplete(input, {
      types: [{ region: "locality" }]
    });
    this.autocompleteA.addListener("place_changed", this.fillInAddressA);
  }

  geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        console.log(geolocation);
      });
    }
  }

  fillInAddressA() {
    const componentForm = {
      street_number: "short_name",
      route: "long_name",
      locality: "long_name",
      administrative_area_level_1: "short_name",
      country: "long_name",
      postal_code: "short_name"
    };
    // Get the place details from the autocomplete object.

    this.placeA = this.autocompleteA.getPlace();
    /*this.setState({placeResult: this.place.address_components})*/
    this.setState({
      address: this.placeA
    });

    this.getAddressA(this.placeA.formatted_address);

    for (let component in this.componentForm) {
      this.refs.component.value = "";
      this.refs.component.disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    if (this.placeA.address_components) {
      this.placeA.address_components.forEach((component, index) => {
        const addressType = this.placeA.address_components[index].types[0];
        if (componentForm[addressType]) {
          const val = this.placeA.address_components[index][
            componentForm[addressType]
          ];
          console.log(val);
        }
      });
    }
  }

  getAddressA(val) {
    var OK = window.google.maps.GeocoderStatus.OK;
    var geocoder = new window.google.maps.Geocoder();
    geocoder.geocode({ address: val }, (results, status) => {
      if (status !== OK) {
        console.log(status);
      } else {
        console.log(results);
        var latLng = {
          lat: results[0].geometry.location.lat(),
          lng: results[0].geometry.location.lng()
        };
        console.log(results, latLng);
        this.setState({
          pointA: { formatted_address: val, position: latLng }
        });
      }
    });
  }

  initAutocompleteB() {
    console.log(this.refs);
    const input = document.getElementById("autoCompletePlacesPointB");
    console.log(input);
    const google = window.google;
    this.autocomplete = new google.maps.places.Autocomplete(input, {
      types: ["geocode"]
    });

    this.autocomplete.addListener("place_changed", this.fillInAddressB);
  }

  fillInAddressB() {
    const componentForm = {
      street_number: "short_name",
      route: "long_name",
      locality: "long_name",
      administrative_area_level_1: "short_name",
      country: "long_name",
      postal_code: "short_name"
    };
    // Get the place details from the autocomplete object.

    this.place = this.autocomplete.getPlace();
    /*this.setState({placeResult: this.place.address_components})*/
    this.setState({
      address: this.place
    });

    this.getAddressB(this.place.formatted_address);

    for (let component in this.componentForm) {
      this.refs.component.value = "";
      this.refs.component.disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    if (this.place.address_components) {
      this.place.address_components.forEach((component, index) => {
        const addressType = this.place.address_components[index].types[0];
        if (componentForm[addressType]) {
          const val = this.place.address_components[index][
            componentForm[addressType]
          ];
          console.log(val);
        }
      });
    }
  }

  getAddressB(val) {
    var OK = window.google.maps.GeocoderStatus.OK;
    var geocoder = new window.google.maps.Geocoder();
    geocoder.geocode({ address: val }, (results, status) => {
      if (status !== OK) {
        console.log(status);
      } else {
        console.log(results);
        var latLng = {
          lat: results[0].geometry.location.lat(),
          lng: results[0].geometry.location.lng()
        };
        this.setState({
          pointB: { formatted_address: val, position: latLng },
          send: true
        });
        console.log(results, latLng);
      }
    });
  }

  addCirclePointA(e) {
    console.log(e);
    this.setState({
      pointA: { ...this.state.pointA, circle: e }
    });
  }

  addCirclePointB(e) {
    this.setState({
      pointB: { ...this.state.pointB, circle: e }
    });
  }

  render() {
    console.log(this.state.pointA, this.state.pointB);
    const classes = style;
    return (
      <Grid container style={{ height: "500px" }}>
        <Grid item xs={3}>
          <form className={classes.container}>
            {/* <TextField
              style={{ width: "300px" }}
              id="pointAPlaces"
              label="Point A"
              type="search"
              margin="normal"
            /> */}
            <input id="pointAPlaces" />
            <br />
            <TextField
              onChange={e => this.addCirclePointA(e.target.valueAsNumber)}
              label="Radius"
              type="number"
              className={classes.textField}
              InputLabelProps={{
                shrink: true
              }}
              margin="normal"
            />
            <br />
            <TextField
              style={{ width: "300px" }}
              id="autoCompletePlacesPointB"
              label="Point B"
              type="search"
              margin="normal"
            />
            <br />
            <TextField
              onChange={e => this.addCirclePointB(e.target.value)}
              label="Radius"
              type="number"
              className={classes.textField}
              InputLabelProps={{
                shrink: true
              }}
              margin="normal"
            />
            <br />
            <TextField
              className={classes.formControl}
              label="Fare"
              id="formatted-numberformat-input"
              // InputProps={{
              //   inputComponent: NumberFormatCustom
              // }}
            />
            <br />
            <FormControlLabel
              style={{ marginTop: "20px" }}
              control={<Checkbox checked={true} color="primary" />}
              label="Same charges apply for revert"
            />
          </form>
          <div>
            <Button
              style={{
                width: "100px",
                height: "40px",
                backgroundColor: "black",
                margin: "20px"
              }}
            >
              <p style={{ color: "white" }}>Add</p>
            </Button>
          </div>
        </Grid>
        <Grid item xs={9}>
          <Map
            polyline={
              this.state.send
                ? { pointA: this.state.pointA, pointB: this.state.pointB }
                : null
            }
          />
        </Grid>
      </Grid>
    );
  }
}

const mapStateToProps = state => {
  return {
    countryCode: state.App.countryCode,
    pointA: state.SpecialRoutes.pointA,
    pointB: state.SpecialRoutes.pointB
  };
};
export default connect(
  mapStateToProps,
  { addPointA, addPointB, addSpecialRoute }
)(addSpecialRoutes);

basically the problem was with react-google-maps, that is depreciated and i skip it and start using react-google-maps/api