How to use the draft-js-buttons.createBlockStyleButton function in draft-js-buttons

style: 'BOLD',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbItalicButton = () =&gt; <span title="{I18n.t('common.editor.italic')}">;

export const ItalicButton = createInlineStyleButton({
  style: 'ITALIC',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbUnorderedListButton = () =&gt; <span title="{I18n.t('common.editor.bulletList')}">;

export const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: 
});</span></span>

BoldButton,
  UnderlineButton,
  BlockquoteButton,
} from 'draft-js-buttons';
import NoSsr from '@material-ui/core/NoSsr';

const HeadlineOneButton = createBlockStyleButton({
  blockType: 'header-one',
  children: (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#000000">
      <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
      <path fill="none" d="M0 0h24v24H0V0z"></path>
    </svg>),
});

const HeadlineTwoButton = createBlockStyleButton({
  blockType: 'header-two',
  children: (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 24 24" height="24" fill="#000000">
      <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
      <path fill="none" d="M0 0h24v24H0V0z"></path>
    </svg>),
});

const styleMap = theme =&gt; ({
  'CODE': theme.typography.code
})

function customBlockStyleFn(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'spoiler') {
    return 'spoiler';

import createLinkPlugin from 'draft-js-anchor-plugin';
import LinkButton from './editor-plugins/LinkButton'
import { myKeyBindingFn } from './editor-plugins/keyBindings.js'
import createLinkifyPlugin from './editor-plugins/linkifyPlugin'
import ImageButton from './editor-plugins/image/ImageButton.jsx';
import { Map } from 'immutable';
import {
  createBlockStyleButton,
  ItalicButton,
  BoldButton,
  UnderlineButton,
  BlockquoteButton,
} from 'draft-js-buttons';
import NoSsr from '@material-ui/core/NoSsr';

const HeadlineOneButton = createBlockStyleButton({
  blockType: 'header-one',
  children: (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#000000">
      <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
      <path fill="none" d="M0 0h24v24H0V0z"></path>
    </svg>),
});

const HeadlineTwoButton = createBlockStyleButton({
  blockType: 'header-two',
  children: (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 24 24" height="24" fill="#000000">
      <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
      <path fill="none" d="M0 0h24v24H0V0z"></path>
    </svg>),
});

createBlockStyleButton,
  ItalicButton,
  BoldButton,
  UnderlineButton,
  BlockquoteButton
} from 'draft-js-buttons';

import { myKeyBindingFn } from './editor-plugins/keyBindings.js'
import { codeStyle } from './codeStyle.js'
import { htmlToDraft } from '../../lib/editor/utils.js'

const styleMap = {
  ...codeStyle
}

const HeadlineTwoButton = createBlockStyleButton({
  blockType: 'header-two',
  children: (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#000000">
      <path d="M5 4v3h5.5v12h3V7H19V4z"></path>
      <path fill="none" d="M0 0h24v24H0V0z"></path>
    </svg>),
});

class AsyncCommentEditor extends Component {
  constructor(props, context) {
    super(props,context);
    const document = this.props.document;
    let state = {};
    if (document &amp;&amp; document.content) {
      try {
        state = EditorState.createWithContent(convertFromRaw(document.content));