如何在draft js中更新文本的同时切换新的内联样式？

import React, { useState } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const handleInlineStyleChange = (style) => {
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const block = contentState.getBlockForKey(selection.getStartKey());
    const currentInlineStyle = block.getInlineStyleAt(selection.getStartOffset());

    const newInlineStyle = currentInlineStyle.has(style)
      ? currentInlineStyle.remove(style)
      : currentInlineStyle.add(style);

    const newContentState = contentState.merge({
      blockMap: contentState.getBlockMap().set(block.getKey(), block.set('inlineStyle', newInlineStyle)),
    });

    const newEditorState = EditorState.push(editorState, newContentState, 'change-inline-style');
    setEditorState(newEditorState);
  };

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  return (
    <div>
      <button onClick={() => handleInlineStyleChange('BOLD')}>Bold</button>
      <button onClick={() => handleInlineStyleChange('ITALIC')}>Italic</button>
      <button onClick={() => handleInlineStyleChange('UNDERLINE')}>Underline</button>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        handleKeyCommand={handleKeyCommand}
      />
    </div>
  );
};

export default MyEditor;