title: Unknown DraftEntity key when inserting media in Draftjs
body: <p>i'm new to <code>Draft.js</code> and i try to make simple editor with following <a href="https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/media/media.html" rel="nofollow noreferrer">this example</a>, my code is not exact same as the example but it's look like. but when i click on <code>audio</code> or <code>video</code> button that calls <code>makeMedia</code> i get this error : </p>
  
  <pre><code>  Unknown DraftEntity key
  </code></pre>
  
  <p>and this is my editor : </p>
  
  <pre><code>import React, { Component } from 'react'
  import {Editor, EditorState, RichUtils,CompositeDecorator,AtomicBlockUtils,Entity } from 'draft-js'
  import 'draft-js/dist/Draft.css';
  
   class MyEditor extends Component {
  constructor(props) {
      super(props)
      this.state = { editorState: EditorState.createEmpty()}
      this.onChange = this.onChange.bind(this)
      this.makeMedia = this.makeMedia.bind(this)
  }
  onChange(editorState) {
      this.setState({ editorState })
  }
  makeMedia(type){
      const {editorState} = this.state;
      const contentState = editorState.getCurrentContent();
      const contentStateWithEntity = contentState.createEntity(
          type,
          'IMMUTABLE',
          {}
      )
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      const newEditorState = EditorState.set(editorState,{currentContent:contentStateWithEntity})
      this.setState({
          editorState:AtomicBlockUtils.insertAtomicBlock(
              newEditorState,
              entityKey,
              ''
          )
      })
  }
  render() {
      return (
          &lt;div className="editor"&gt;
              &lt;button onClick={()=&gt;this.makeMedia('audio')}&gt;audio&lt;/button&gt;
              &lt;button onClick={()=&gt;this.makeMedia('video')}&gt;video&lt;/button&gt;
              &lt;Editor
              blockRendererFn={mediaBlockRenderer}
                  customStyleMap={colorStyleMap}
                  editorState={this.state.editorState}
                  onChange={this.onChange}
                  ref={(element) =&gt; { this.editor = element }}
              /&gt;
          &lt;/div&gt;
      )
  }
   }
   function mediaBlockRenderer(block) {
   console.log(block.getType())
      if (block.getType() === 'atomic') {
        return {
          component: Media,
          editable: false,
        };
      }
  
      return null;
    }
  
    const Audio = (props)=&gt;{
    return &lt;audio controls/&gt;
   }
  const Video = (props)=&gt;{
  return &lt;Video controls/&gt;
   }
   const Media = (props)=&gt;{
     let media;
     const entity = props.contentState.getEntity(
      props.block.getEntityAt(0)
     )
     const type = entity.getType();
      if(type === 'audio'){
      media = &lt;Audio/&gt;
     }
     else if (type === 'video'){
      media = &lt;Video/&gt;
    }
     return media;
  }
  export default MyEditor
  </code></pre>