title: Invariant Violation: React.Children.only expected to receive a single React element child
body: <p>I keep getting the invariant violation and I really don't know why ... it definitely has to do with the OverlayTriggers. When leaving them out everything works fine.</p>
  
  <p><strong>Imports:</strong></p>
  
  <pre><code>import Col from 'react-bootstrap/lib/Col';
  import Row from 'react-bootstrap/lib/Row';
  import Tooltip from 'react-bootstrap/lib/Tooltip';
  import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
  </code></pre>
  
  <p><strong>supposed to render a list item with a Key/Value pair, where the Value has a tooltip:</strong></p>
  
  <pre><code>const renderCustomField = (field,customFields) =&gt; {
      const tooltip = (&lt;Tooltip id="tooltip"&gt;{customFields[field]['sub']}&lt;/Tooltip&gt;)
      return (
          &lt;li&gt;
              &lt;OverlayTrigger placement="top" overlay={tooltip}&gt;
                  {field}
              &lt;/OverlayTrigger&gt;
          &lt;/li&gt;
      )
  }
  </code></pre>
  
  <p><strong>The class that wants to render the customFields:</strong></p>
  
  <pre><code>export default class EventHeaderCustomFields extends Component {
      render () {
          const customFieldsNames = Object.keys(this.props.customFields);
  
          return (
              &lt;Col xs={12}&gt;
                  &lt;h4&gt;&lt;strong&gt;Short overview:&lt;/strong&gt;&lt;/h4&gt;
                  &lt;ul&gt;
                  {customFieldsNames.map(
                      (field) =&gt; renderCustomField(field,this.props.customFields)
                  )}
                  &lt;/ul&gt;
              &lt;/Col&gt;
          )
      }
  }
  
  EventHeaderCustomFields.propTypes = {
      eventData:PropTypes.object
  };
  </code></pre>