DOM-owning child components?

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-leaflet.js"></script>
<div id="examples">
  <div class="container" id="container1"></div>
  <div class="container" id="container2"></div>
</div>

CSS

.leaflet-container {
    height: 200px;
    width: 100%;
}

.container {
  width: 300px;
}

#examples {
  display: flex;
  justify-content: space-around;
}

Babel + JSX

const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class App extends React.Component {
	constructor() {
  	super();
    this.state = {
    	childIndex: 0
    };
  }
  
  componentDidMount() {
  	// Switch the active child every 2 seconds
  	setInterval(() => {
    	this.setState((prevState, props) => ({
      	childIndex: (prevState.childIndex + 1) % props.children.length
      }));
    }, 2000);
  }
  
  render() {
  	// If cycle is turned on, render only the active child component.
    // Otherwise, render all of them, for demonstration purposes only
    return (
    	<div>
    	  <h1>Child cycler</h1>
        <p>{this.props.subtitle}</p>
        {
        	this.props.cycle
        	? this.props.children[this.state.childIndex]
          : this.props.children
        }
    	</div>
    );
  }
}

// A standard React-Leaflet component, taken directly from documentation
class SimpleMap extends React.Component {
  constructor(props) {
    super(props);
    const [ lat, lng ] = this.props.pos;
    this.state = { lat, lng, zoom: 13 };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    const name = this.props.name;
    // The <Map> component needs direct ownership of a unique DOM node
    return (
    	<div style={{border: '1px solid #555555', margin: '5px'}}>
        <h2>{name}</h2>
        <Map center={position} zoom={this.state.zoom}>
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          <Marker position={position}>
            <Popup>
              <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const app1 = (
	<App subtitle={
  	"When rendered separately, each child component gets its own DOM node " +
    "to draw its map into, as expected."
  	}>
   ...