Map.js

//Example Usage of custom control
export default ({lat, lng, google}) => (
  <GoogleMap
    defaultCenter={{lat, lng}}
    defaultZoom={14}
    minZoom={6}
    google={google}
    containerStyle={{ height: '575px', width: '100%', position: 'relative' }}
  >
    <Marker position={{lat, lng}} />
    <MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}>
      <div>That was easy</div>
    </MapControl>
  </GoogleMap>
)

MapControl.js

import { Component } from 'react'
import { createPortal } from 'react-dom'
import { MAP } from 'react-google-maps/lib/constants'
import PropTypes from 'prop-types'
export default class MapControl extends Component {

  static contextTypes = { [MAP]: PropTypes.object }

  componentWillMount() {
    this.map = this.context[MAP]
    this.controlDiv = document.createElement('div')
    this.map.controls[this.props.position].push(this.controlDiv)
  }
  componentWillUnmount() {
    this.map.controls[this.props.position].removeAt(this.divIndex)
  }
  render() {
    return createPortal(this.props.children, this.controlDiv)
  }
}

With this solution, my control was "blinking" every time the map re-rendered, but this didn't happen when I used this solution instead.