react-google-maps StandaloneSearchBox unmounting - reactjs

Question

I am trying to use the StandaloneSearchBox Component from https://www.npmjs.com/package/react-google-maps
After looking at the docs and some other answers I implemented the component like this:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withScriptjs } from "react-google-maps";
import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
import { Input } from "semantic-ui-react";
import API_KEY from "../config/googleAPIkey";
class AddressSearchbox extends Component {
constructor(props) {
super(props);
this.searchboxRef = null;
}
onSearchBoxMounted = ref => {
this.searchboxRef = ref;
};
onPlacesChanged = () => {
const places = this.searchboxRef.getPlaces();
this.props.onPlaceSelect(places[0]);
};
render() {
const Searchbox = withScriptjs(props => (
<StandaloneSearchBox
ref={props.onSearchBoxMounted}
onPlacesChanged={props.onPlacesChanged}
>
<Input
type="text"
placeholder="Type address or google place name"
icon="search"
/>
</StandaloneSearchBox>
));
return (
<Searchbox
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${API_KEY}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
onPlacesChanged={this.onPlacesChanged}
onSearchBoxMounted={this.onSearchBoxMounted}
/>
);
}
}
AddressSearchbox.propTypes = {
onPlaceSelect: PropTypes.func.isRequired
};
export default AddressSearchbox;
I use the component in a signup form where all the other input fields update the state on input change causing re-rendering of the whole form.
When the AddressSearchbox component gets re-rendered it seems that it gets unmounted and then remounts causing flickering. The component itself works fine.
EDIT: When logging the ref parameter passed in onSearchBoxMounted() it prints null and then the SearchBox object after every re-render, so according to this the SearchBox component gets unmounted

Answer 1

I'm not sure if it's still actual, but to fix this you need to extract this part from the render function before your class definition:
const Searchbox = withScriptjs(props => (....))
So it will look like this:
imports ...
const Searchbox = withScriptjs(props => (....))
class AddressSearchbox extends Component {
...
render() {
return (
<Searchbox .../>
);
}
}
In practice, most React apps only call ReactDOM.render() once.
Source: https://reactjs.org/docs/rendering-elements.html
You see this flickering because ReactJS runs render() function each time when your state changes.