Matching HTML tags in custom overlay htmlmixed mode

Greetings,

I have been trying to enable tag matching using this example with custom overlay mode on htmlmixed and usnig matchTags: {bothTags: true} in the editor initialisation settings, however I am not able to get it to work with my custom mode,

const cmInitialSettings = {
          value:"",matchTags: {bothTags: true}, autoCloseTags:true,
          extraKeys: {"Ctrl-Space": "autocomplete", "Ctrl-/": "toggleComment", "Ctrl-J": "toMatchingTag"},
          lineNumbers: true, styleActiveLine: true,
          matchBrackets: true, tabSize:2, lineWrapping: true, addModeClass: true,
          foldGutter: true, autofocus:false,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        }
const cme = CodeMirror(document.getElementById("cf7-codemirror"),cmInitialSettings);
CodeMirror.defineMode("shortcode", function(config, parserConfig) {
        let scOverlay = {
          token: function(stream, state) {
            let ch;
            if (stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/)) {
              while ((ch = stream.next()) != null){
                if (ch == "]" ) {
                  //stream.eat("]");
                  return "shortcode";
                }
              }
            }else if(stream.match(/data-([a-z0-9_]+)/)){
              while ((ch = stream.next()) != null){
                if (ch == '=' ) {
                  //stream.eat("]");
                  return "cf7sg-attr";
                }
              }
            }
            while (stream.next() != null && !stream.match(/^\[([a-zA-Z0-9_]+)\*?\s?/, false) && !stream.match(/data-([a-z0-9_]+)/,false) ) {}
            return null;
          }
        };
        return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "htmlmixed"), scOverlay);
      });

cme.setOption('mode','shortcode');

Any idea how I can get the tags to match/highlight?