RichUtils.toggleInlineStyle(editorState, "style") is not working (DRAFT.JS)

Question

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

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

  const styleMap = {
    RED: {
      color: "red",
    },
    CODE: {
      backgroundColor: "yellow",
    },
  };

  const handleBeforeInput = (e, editorState) => {
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const currentBlock = contentState.getBlockForKey(selection.getStartKey());
    const currentText = currentBlock.getText();
    const endText = currentText.slice(-4);

    // Check if the "*" character is followed by a space
    if (e === " " && currentText.endsWith("*") && !endText.includes("**")) {
      console.log("* character followed by space!");
      setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"));
    }
    // Check if the "**" character is followed by a space
    if (e === " " && currentText.endsWith("**") && !endText.includes("***")) {
      console.log("** character followed by space!");
      setEditorState(RichUtils.toggleInlineStyle(editorState, "RED"));
    }
    // Check if the "***" character is followed by a space
    if (e === " " && endText.endsWith("***")) {
      console.log("*** character followed by space!");
      setEditorState(RichUtils.toggleInlineStyle(editorState, "UNDERLINE"));
    }
    // Check if the "```" character is followed by a space
    if (e === " " && endText.endsWith("```")) {
      console.log("``` character followed by space!");
      setEditorState(RichUtils.toggleInlineStyle(editorState, "CODE"));
    }
    // Check if the "#" character is followed by a space
    if (e === " " && endText.endsWith("#")) {
      console.log("# character followed by space!");
      setEditorState(RichUtils.toggleBlockType(editorState, "header-one"));
    }
  };

  return (
    <div id="draft-editor">
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <div />
        <h3>Demo Editor by Ujjwal Sharma</h3>
        <button className="button">Save</button>
      </div>
      <Editor
        editorState={editorState}
        customStyleMap={styleMap}
        onChange={setEditorState}
        handleBeforeInput={(e, editorState) => {
          handleBeforeInput(e, editorState);
        }}
      />
    </div>
  );
};

export default DraftEditor;

PS: if i hit the same line setEditorState(RichUtils.toggleInlineStyle(editorState, "CODE")) onClick of a button where event.preventDefault() is present then the inlinestyles changes

I am trying to change inline styles of the editor on basis of the key pressed and wrote the code for it but block type is changing but not inline styles

i am trying to do is if "* " is pressed then code should become BOLD and similarly other functonalities mentioned in the if else