Adding HTML node in insertContent

[vishalDhull0910]

I have a custom emoji which outputs an src link to image in case of native it runs fine but in this case it is not working

   <EmojiPopover
      triggerIcon={<EmojiToolbarButton />}
      // intentionally not bringing focus back to the editor to keep the popover open
      onEmojiClick={(emoji: any) => {
        if (!!emoji.native) {
          return editor?.chain().insertContent(emoji.native).run();
        }
        let emj = document.createElement("div");
        emj.innerHTML = `<img src="${emoji.src}" />`
        return editor?.chain().insertContent(emj).run();
      }}
      offset={[-210, -5]}
      shouldCloseOnClick={false}
  />

Error :

 [tiptap warn]: Invalid content. Passed value: <div>​<img src=​"https:​/​/​github.githubassets.com/​images/​icons/​emoji/​octocat.png">​</div>​ Error: RangeError: Unknown node type: undefined
    at Schema.nodeType (index.js:2446:19)
    at _Node.fromJSON (index.js:1523:23)
    at Schema.nodeFromJSON (index.js:2431:21)
    at createNodeFromContent (createNodeFromContent.ts:34:21)
    at insertContentAt.ts:37:21
    at Object.insertContentAt (CommandManager.ts:137:64)
    at insertContent.ts:23:19
    at Object.chainedCommand [as insertContent] (CommandManager.ts:86:45)
    at onEmojiClick (toolbarButtons.tsx:108:32)
    at Object.onEmojiSelect (EmojiPopover.tsx:163:21)

Also tried this

return editor?.chain().insertContent("<div><p>hi</p><img src='https://github.githubassets.com/images/icons/emoji/octocat.png' width='50%'></div>").run();

but image still not loading, no error though