How to Save and Cancel button in bottom of react-draft-wysiwyg?

I want to add some buttons like save and cancel . How to do that ? similar like teams where we can edit our comments on click of save and cancel? Add onBlur={this.updateComment.bind(this)} event to do save comments in editor but want to implement buttons like below

For my editor.

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
   onBlur={this.updateComment.bind(this)}
    }}
/>

You need to add the buttons independently and trigger the events on them.

Then you need to move the onBlur to the shared wrapper element and it will work as expected.

In the below example you can see:

• a wrapper div with save on blur
• buttons wrapper next to the editor
• each button triggers a change on the form state

    <div onBlur={onSave}> 
      <Editor editorState={editorState} onEditorStateChange={onChange} />
        <div className="buttons">
          <span className="status">{saveState}</span>
          <button className="button" onClick={onCancel}>
            X
          </button>
          <button className="button" onClick={onSave}>
            V
          </button>
        </div>
    </div>

Here is a codesandbox example: https://codesandbox.io/s/react-draft-wysiwyg-with-save-and-cancel-xoxr3f?file=/src/EditorWithButtons.jsx