Quill rich text editor bold option not working with quill-mentions

Question

My Quill text after tagging is not getting bold even though the Bold option is selected. I am using quill-mentions for tagging operation.

import QuillMention from "quill-mention";

This is the sample that I am getting:

<p><strong>Hi </strong><span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9awsd" data-value="ABC "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>ABC </span></span> how are you</p>

Hi @ABC how are you

and it should be Hi @ABC how are you

The </strong> should be closed at the end but it gets closed whenever @ is pressed.

Mention Module:

    allowedChars: /^[A-Za-z\s]*$/,
    mentionDenotationChars: ["@"],
    atValues: atValues,
    source: function(searchTerm, renderList, mentionChar) {
      let values = mentionModule.atValues;
      if (searchTerm.length === 0) {
        renderList(values, searchTerm);
      } else {
        const matches = [];
        for (let i = 0; i < values.length; i++)
          if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))
            matches.push(values[i]);
        renderList(matches, searchTerm);
      }
    },
  };


Any context on how to use parchments for this?
I tried:
var Parchment = Quill.import("parchment");
config = {
  scope: Parchment.Scope.INLINE
};
var formatAttributor = new Parchment.Attributor.Class("bold", "ql", config);
Quill.register(formatAttributor);

but didnt work

Current Bold format:

import Inline from "../blots/inline";

class Bold extends Inline {
  static create() {
    return super.create();
  }

  static formats() {
    return true;
  }

  optimize(context) {
    super.optimize(context);
    if (this.domNode.tagName !== this.statics.tagName[0]) {
      this.replaceWith(this.statics.blotName);
    }
  }
}
Bold.blotName = "bold";
Bold.tagName = ["STRONG", "B"];

export default Bold;