title: Render HTMLAudioElement DOM element with React
body: <p>I'm using Twillio JS API in my project to display video outputs from multiple sources. This API generates enumeration of DOM video/audio elements that can be attached to the page as follows:</p>
  
  <pre><code>let tracks = TwillioVideo.createLocalTracks({
    video: { deviceId: this.state.selectedVideoInput.deviceId },
    audio: { deviceId: this.state.selectedAudioInput.deviceId }
  }
  //Find dom element to attach tracks to
  let previewContainer = document.getElementById('local-media')
  
  //Attach all tracks
  this.setState({localTracks: tracks})
  tracks.forEach(track =&gt; previewContainer.appendChild(track.attach()))
  </code></pre>
  
  <p><code>track.attach()</code> generates a dom element that can be appended but its not something i can put in React state so it can be rendered like so:</p>
  
  <pre><code>&lt;div id="local-media"&gt;{this.state.localTracks.map(track =&gt; track.attach()}&lt;/div&gt;
  </code></pre>
  
  <p>If I in fact try to do it i get:</p>
  
  <blockquote>
    <p>Unhandled Rejection (Invariant Violation): Objects are not valid as a
    React child (found: [object HTMLAudioElement]). If you meant to render
    a collection of children, use an array instead.</p>
  </blockquote>
  
  <p><strong>EDIT 1:</strong>
  I was able to get rid of error by doing this:</p>
  
  <pre><code>{this.state.localTracks.map(track =&gt; track.attach().Element)}
  </code></pre>
  
  <p>but it's not returning renderable html but <code>undefined</code> instead</p>