grapesjs-mjml plugin jquery error on using Rich text editor

Question

const editor = grapesJS.init({
    container: editorContainerRef.current,
    plugins: [grapesJSMJML, customcode, basic],
    pluginsOpts: {

    },
    storageManager: {
        autosave: true,
        getStepsBeforeSave: () => 5,
    },
    panels: {
        panelManager: {
            appendTo: "#custompanel",
        },
    },

});

const rte = editor.RichTextEditor;

rte.add("Shortcodes", {
    name: "Shortcodes",
    icon: `
          <select >
              <option selected="true" disabled="disabled" id="defaultPlaceholder">Shortcodes</option>
              <option value="{{Name}}">{{Name}}</option>
              <option value="{{First_name}}">{{First_name}}</option>
              <option value="{{Last_name}}">{{Last_name}}</option>
              <option value="{{Email}}">{{Email}}</option>
              <option value="{{Phone}}">{{Phone}}</option>
              <option value="{{Age}}">{{Age}}</option>
              <option value="{{Gender}}">{{Gender}}</option>
              <option value="{{City}}">{{City}}</option>
              <option value="{{State}}">{{State}}</option>
              <option value="{{Country}}">{{Country}}</option>
              <option value="{{Pincode}}">{{Pincode}}</option>
              <option value="{{Personalization_a}}">{{Personalization_a}}</option>
              <option value="{{Personalization_b}}">{{Personalization_b}}</option>
              <option value="{{Personalization_c}}">{{Personalization_c}}</option>
              <option value="{{Personalization_d}}">{{Personalization_d}}</option>
              <option value="{{Personalization_e}}">{{Personalization_e}}</option>
          </select>
      `,
    event: "change",
    result: (rte, action) => {
        rte.insertHTML(action.btn.children[0].selectedOptions[0].value);
    },
});

I am using grapesjs-mjml plugin in grapesjs editor. and added a custom select button to default rich text editor. when select the option from select edior give jquery error like this

$ is not a function
TypeError: $ is not a function
    at getModel (http://localhost:3000/static/js/bundle.js:299731:17)
    at RichTextEditor.insertHTML (http://localhost:3000/static/js/bundle.js:333896:43)
    at Object.result (http://localhost:3000/static/js/bundle.js:2778:15)
    at btn.<computed> (http://localhost:3000/static/js/bundle.js:333811:24)

But when I am inserting the shortcodes in grapesjs basic block it is inserting properly.

I need to resolve the issue.