react-contenteditable cursor jumps to end when state changes

I am working with this Library react-contenteditable

I have a text editing area where when the state changes in the redux the cursor jumps to the end. i want the cursor to stay where editing stops

<div className={classes.speaker} ref={myRef}>
    <ContentEditable
        key={position}
            style={{
                flex: 1,
                    display: 'flex',
                    flexWrap: 'wrap',
                    alignItems: 'center'
                }}
            innerRef={contentEditable}
            html={html} // innerHTML of the editable div
            disabled={!editMode} // use true to disable editing
            className={holdingCtrlKey ? 'cursor-pointer' : ''}
            onChange={e => {
                autoSave(e);
            }}
            onClick={e => {
                if (editMode) {
                    setEditingNow(true);
                    setStartingPoint({ ...e.target.dataset });
                }
                handleClick(e);
            }}
            tagName="div" // Use a custom HTML tag (uses a div by default)
    />
</div>

i can get the position of the span as im saving data-position in every span. How can i keep the cursor where editing stops

As you can see in the image it jumps to the end as soon as the state changes