I was trying to implement drag and drop functionality inside editor. i am able to drag drop the value inside the editor, but the problem is when i try to drop another value , string doesn't get concatenated .

Codesandbox: what i tried

const EditorComponent = ({ editorState, setEditorState }) => {
  const onChange = async (value) => {
    setEditorState(value);
  };

  const insertText = (text, editorValue) => {
    const currentContent = editorValue.getCurrentContent();
    const currentSelection = editorValue.getSelection();

    const newContent = Modifier.replaceText(
      currentContent,
      currentSelection,
      text
    );

    const newEditorState = EditorState.push(
      editorValue,
      newContent,
      "insert-characters"
    );
    return EditorState.forceSelection(
      newEditorState,
      newContent.getSelectionAfter()
    );
  };

  const sendTextToEditor = (text) => {
    setEditorState(insertText(text, editorState));
  };

  const [{ isOver }, drop] = useDrop(() => ({
    accept: "button",
    drop: (item) => sendTextToEditor(item.id),
    collect: (monitor) => ({
      isOver: !!monitor.isOver()
    })
  }));

  return (
    <div ref={drop}>
      <Editor
        editorState={editorState}
        ...
        onEditorStateChange={(value) => {
          onChange(value);
        }}
      />
    </div>
  );
};
export default EditorComponent;