Editor Cursor moves back to current position when inserting some html tags.

[ruchi-bravvox]

I am using react(Typescript ), I am trying to insert manually emoji by using img tag into editor. it is working but sometimes cursor goes to back of current position.
Here is my code:

handleEditorChange=()=>{
const imgtag = <img style="width: 1em; height: 1em; margin: 0 .05em 0 .1em; vertical-align: -.1em;" src="https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/${found[0].unified}.png"/>
value = value.replace(found[0].text + " ", imgtag)
if (editorRef) {
editorRef.current?.editor.execCommand('mceInsertContent', false, imgtag);
}
const trimValue = value !== ' '
? value
: value.trim();
setCommentText(trimValue);
}

<Editor
ref={editorRef}
id={id}
apiKey={config.EDITOR_API_KEY}
value={value}
disabled={disabled}
init={{
plugins: 'autoresize autolink image code fullscreen lists paste emoticons',
branding: false,
paste_as_text: true,
menubar: false,
statusbar: false,
toolbar: false,
// height: 34,
inline_boundaries: false,
autoresize_bottom_margin: 0,
autoresize_overflow_padding: 0,
content_css:
['//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
'/tinymceEditor.css'],
placeholder: placeholder,
smart_paste: true,
font_formats: "DM Sans",
content_style: "body {color: #141419; font-size: 14px; font-family: 'DM Sans',sans-serif; } .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {color: #A6A6A6;}",
paste_preprocess: function (pl: any, o: any) {
const charCount = calculateLength(o.target.contentDocument.body.innerHTML);
const remainingCharCount = maxLength - charCount;
if (remainingCharCount < o.content.length) {
o.content = o.content.substring(0, remainingCharCount);
}
},
emoticons_database: 'emojiimages',
emoticons_images_url: 'https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/'
}}
onEditorChange={handleEditorChange}
/>

      How to solve this issue, please get update ASAP.