Updating child prop breaks connection with parent state - reactjs

Question

I'm using react-google-maps to display markers on a map. When I use the SearchBox function in the child component to set props.locations my map Markers appear. However, when I use a button in the parent component to update the state of the locations within MapWithASearchBox the child prop doesn't recognise the change. If I reload the page and just use the button on the parent Component the markers appear correct. I assume I'm breaking the connection between child and parent when I set the prop within the child component.
Path: Parent Component MapPage.jsx
export default class MapPage extends Component {
constructor(props) {
super(props);
this.state = {
companies: []
}
this.handleButtonASXMarketCap = this.handleButtonASXMarketCap.bind(this);
}
handleButtonASXMarketCap(limit, e) {
e.preventDefault();
Meteor.call('getASXTop100', limit, (error, result) => {
if (result) {
this.setStateOfCompanies(result);
}
});
}
setStateOfCompanies(data) {
this.setState({
companies: data
})
}
render() {
return (
<div>
<Button color="primary ml-2" onClick={(e) => this.handleButtonASXMarketCap(100, e)}>Top 100 ASX</Button>
<MapWithASearchBox
locations={this.state.companies}
/>
</div>
);
}
}
Path: Child Component MapWithASearchBox.jsx
const MapWithASearchBox = compose(
withProps({
googleMapURL: "myUrl",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
bounds: null,
center: {
lat: -23.696248, lng: 133.880731
},
zoom: 4,
markers: [],
onPlacesChanged: () => {
const places = refs.searchBox.getPlaces();
const bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport)
} else {
bounds.extend(place.geometry.location)
}
});
const nextMarkers = places.map(place => ({
position: place.geometry.location,
}));
const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
this.setState({
center: nextCenter,
markers: nextMarkers,
zoom: 15
});
const lat = nextMarkers.map(x => x.position.lat());
const lng = nextMarkers.map(x => x.position.lng());
Meteor.call('runMethodTest', lat[0], lng[0], (error, result) => {
if (result) {
this.setState({
locations: result
});
}
});
},
})
},
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap>
<SearchBox
ref={props.onSearchBoxMounted}
bounds={props.bounds}
controlPosition={google.maps.ControlPosition.TOP_LEFT}
onPlacesChanged={props.onPlacesChanged}
>
<input
type="text"
placeholder="Customized your placeholder"
/>
</SearchBox>
{props.locations.map((location, index) => (
<span key={location._id.location.lng}>
<Marker
position={location._id.location}
onClick={() => props.onToggleOpen(index)}
/>
</span>
))}
</GoogleMap>
);