Problem rendering inline tex with draftjs-latex-plugin

Question

I am using draft-js-latex-plugin package to implement Tex in my Draft-JS editor. The documentation of the package says the following:

Press $ for starting Inline TeX Press CMD + M for starting Tex Block To write the $ character, type $

Now when I press $, an empty space comes in instead of inline-Tex (sometimes it occurs sometimes not, randomly).

Problem is to change that empty space to inline-tex component.

Here is how I implemented the plugin (avoided the rest of the code):

...
import { getLaTeXPlugin } from "draft-js-latex-plugin";
import "draft-js-latex-plugin/lib/styles.css";
import "katex/dist/katex.min.css";

const DraftEditor = props => {
   ...
   const LaTeXPlugin = getLaTeXPlugin();
   const plugins = [LaTeXPlugin];
   return <Editor
          customStyleMap={highlightStyleMap}
          ref={editorRef}
          handleKeyCommand={handleKeyCommand}
          editorState={editorState}
          onChange={changeHandler}
          plugins={plugins}
        />
}