react-google-maps OverlayView zIndex

Trying to get zIndex working on an OverlayView. [brcdn version]

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://www.brcdn.org/react-google-maps/4.7.2"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.overlay {
  background: white;
  border: 1px solid #ccc;
  padding: 5px;
  max-width: 40em;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript 1.7

// This version loads react-google-maps from brcdn,
// but fails with "Only a ReactOwner can have refs..."
// probably because of duplicate React/ReactDOM
//https://gist.github.com/jimfb/4faa6cbfb1ef476bd105#gistcomment-1605418

import {GoogleMap, GoogleMapLoader, OverlayView} from "react-google-maps";

class OverlayViewExample extends React.Component {
  render () {
    const pos = {lat: -34.397, lng: 150.644};
    const mapPane = OverlayView.OVERLAY_MOUSE_TARGET;
    const getOffset = this.getPixelPositionOffset.bind(this);
    
    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={pos}>
        <OverlayView
          position={pos}
          mapPaneName={mapPane}
          getPixelPositionOffset={getOffset}
        >
          <div style={{zIndex: 2}} className="overlay"          ref="childDiv">This should be in front</div>
        </OverlayView>
        <OverlayView
          position={pos}
          mapPaneName={mapPane}
          getPixelPositionOffset={getOffset}
        >
          <div style={{zIndex: 1}} className="overlay">Another overlay should be in front of me</div>
        </OverlayView>
      </GoogleMap>
    );
  }

  getPixelPositionOffset (width, height) {
    // uncomment this for a hack workaround:
    // if (this.refs.childDiv) {
    //  this.refs.childDiv.parentNode.style.zIndex = 2;
    // }
    return {x: -(width / 2), y: -(height / 2)};
  }
}

ReactDOM.render(
  <GoogleMapLoader 
  	containerElement={
      <div style={{height: '100%'}}/>
    }
    googleMapElement={
    	<OverlayViewExample/>
    }/>,
  document.getElementById('container')
);