Unable to detect '**' in the starting of string and changing the style of text in the editor after by hiding these characters

Question

import React, { useState, useEffect } from 'react';
import { Editor, EditorState, RichUtils, convertToRaw, convertFromRaw } from 'draft-js';
import 'draft-js/dist/Draft.css';
import './editor.css';

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

  useEffect(() => {
    const savedContent = localStorage.getItem('editorContent');
    if (savedContent) {
      setEditorState(EditorState.createWithContent(convertFromRaw(JSON.parse(savedContent))));
    }
  }, []);

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

  const handleChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleBeforeInput = (char) => {
    const contentState = editorState.getCurrentContent();
    const selectionState = editorState.getSelection();
    const currentBlock = contentState.getBlockForKey(selectionState.getStartKey());
    const blockType = currentBlock.getType();
    const startOffset = selectionState.getStartOffset();
    const textBefore = currentBlock.getText().slice(0, startOffset);
  
    if (char === '#' && textBefore.trim() === '') {
      setEditorState(RichUtils.toggleBlockType(editorState, 'header-one'));
      return 'handled';
    }
    if (char === '*' && textBefore.trim() === '') {
      setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
      return 'handled';
    }
    if (textBefore.slice(-2) === '**' && char === ' ') {
      setEditorState(RichUtils.toggleInlineStyle(editorState, 'underline'));
      return 'handled';
    }
    if (textBefore.slice(-3) === '***' && char === ' ') {
      setEditorState(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'));
      return 'handled';
    }
    if (char === '```' && textBefore.trim() === '') {
      const newContentState = RichUtils.toggleCode(editorState.getCurrentContent(), editorState.getSelection());
      setEditorState(EditorState.push(editorState, newContentState, 'change-block-type'));
      return 'handled';
    }
  
    return 'not-handled';
  };
  
  const handleSave = () => {
    const contentState = editorState.getCurrentContent();
    const contentJSON = JSON.stringify(convertToRaw(contentState));
    localStorage.setItem('editorContent', contentJSON);
  };

  return (
    <div className="editor-container">
      <div className="editor-wrapper">
        <Editor
          editorState={editorState}
          onChange={handleChange}
          handleKeyCommand={handleKeyCommand}
          handleBeforeInput={handleBeforeInput}
          placeholder="Start typing..."
          className="my-editor"
        />
      </div>
      <button className="save-button" onClick={handleSave}>Save</button>
    </div>
  );
};

export default MyEditor;

In this code, I can do header-one and BOLD using draft.js by detecting # and * followed by a space and giving the style to the entire text that has been entered in the text editor. But unable to do for **. Need to display a red underline when ** are detected at the start of the sentence and these stars should be hidden immediately.