Custom button in toolbar draftjs editor - reactjs

Question

How can I add a button with a custom function behind it to the draftjs editor? I have the feeling this should be pretty straightforward but I can't find examples or documentation.
I have an Editor with only bold italic and list buttons and I want to add a button that shows a popup where I can select 1 of 3 options and then "inject" this in the editor.
Can someone point me in the right direction (or documentation)?

Answer 1

here how i tried this, purely react hooks way to achieving things,
App.js file
import MyEditor from './Component/MyEditor';
function App() {
<MyEditor />
}
MyEditor.js file export MyEditor component used and imported in App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
import 'draft-js/dist/Draft.css';
import './MyEditor.css'
export default function MyEditor() {
const [editorState, setEditorState] = React.useState(
() => EditorState.createEmpty(),
);
const _onBoldClick = () => {
setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'))
}
return(
<div>
<button onClick={_onBoldClick}>BOLD</button>
<div
>
<Editor
textAlignment="left" placeholder="Enter something here"
editorState={editorState} onChange={setEditorState} />
</div>
</div>
)
}
//ReactDOM.render(<MyEditor />, document.getElementById('container'));
css file for styling
div.DraftEditor-root {
border: 1px solid black;
height: 200px;
width: 200px;
margin-left: 20%;
overflow-y: auto;
}
div.DraftEditor-editorContainer, div.public-DraftEditor-content {
height: 100%;
}