React Dragula on dropping list item html is not render

Question

I am working on react js app where I used "react-dragula" to drag and drop the list items. I am showing the preview of the child component html inside the parent wrapper component. After dropping an element my html is not render properly. I have no idea whether it is because of Dragula or there is some other issue. After dropping the list item I am updating list values according to the element index and updating the state and the re rendering the child component. But it shows me old html it's not re rendering the html of child component using updated props return by parent component.

Here is my code::

class App extends React.Component {
    drake = null;
    socialContainers = [];

    /** lifecycle method */
    componentDidMount() {
        this.drake = Dragula(this.socialContainers, {
            isContainer: function (el) {
                return (el.id === 'social-container');
            },
            moves: function (el, source, handle, sibling) {
                return (handle.id === "socialSortBtn");
            },
            accepts: function (el, target, source, sibling) {
                return (target.id === 'social-container' && source.id === 'social-container');
            },
        });
        this.drake.on('drop', (el, target, source, sibling) => {
            el.style.cursor = "grab";
            let oldIndex = el.dataset.index
            let type = el.dataset.type
            let iconIndx = Array.prototype.indexOf.call(target.children, el);
            let targetIndex = iconIndx > 0 ? iconIndx : 0;
            if (type) {
                let content = {}
                content.reOrder = true;
                content.oldIndex = oldIndex;
                this.props.callback(content, 'content', targetIndex)
            }
        });
        this.drake.on('drag', (el, source) => {
            el.style.cursor="grabbing";
        })
    }

    updateLinkText(val, index) {
        const { data, callback } = this.props;
        let textParsedHtml = new DOMParser().parseFromString(data.content[index].text, 'text/html');
        if (textParsedHtml.getElementsByTagName("a")[0]) {
            textParsedHtml.getElementsByTagName("a")[0].innerHTML = val;
        }
        let content = {}
        content.changeLinkTxt = true
        content.linkText = val
        content.linkTextHtml = textParsedHtml.body.innerHTML
        //update content
        callback(content, 'content', index)
    }

    onSelectShareOpt(selectedVal, selectedIndx, event) {
        event.stopPropagation();
        let socialObj = socialShareArr.find((obj) => obj.value === selectedVal)
        if (socialObj) {
            let htmlObj = this.getHTMLObj(socialObj);
            let content = {}
            content.active_social_icons = socialObj
            if(htmlObj) { content.content = htmlObj }
            // update content
            this.props.callback(content, 'content', selectedIndx)
        }   
    }

    isIconDisabled = (data, val) => {
        let found = false;
        found = data.some(function (obj) {
            if (obj.value === val) {
                return true;
            }
            return false;
        });
        return found;
    }

    renderSocialIcons(dragulaDecoratorRef) {
        const { data } = this.props;
        let socialIcons = data.activeIcons;
        if (!socialIcons) {
            return null
        }
        return (
            <Fragment>
                {socialIcons && socialIcons.length > 0 && socialIcons.map((activeIcon, index) => (
                    <li key={index} data-index={index} data-type={activeIcon.value} className="mb-30">
                        <div className="mr-2">
                            <button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
                            </button>
                        </div>
                        <div className="mb-30">
                            <img className="mr-2" src={activeIcon.icon} alt="social-icon" width="36" height="36" />
                            <FormControl
                                value={activeIcon.value}
                                as="select"
                                onChange={e => this.onSelectShareOpt(e.target.value, index, e)}
                                custom
                                size=''
                            >
                                {socialShareArr && socialShareArr.map((option, index) => (
                                    <option
                                        key={index}
                                        disabled={this.isIconDisabled(socialIcons, option.value)}
                                        value={option.value}
                                    >
                                        {option.label}
                                    </option>
                                ))}
                            </FormControl>
                        </div>
                        <Form.Group>
                            <Form.Label>Link Text</Form.Label>
                            <TextInput
                                value={activeIcon.linkText}
                                onChange={(e) => this.updateLinkText(e.target.value, index)}
                                wrapperClass="mx-10 mb-0"
                            />
                        </Form.Group>
                    </li>
                ))}
            </Fragment>
        );
    }

    // main function
    render() {
        const { data } = this.props;
        const dragulaDecoratorRef = (componentBackingInstance) => {
            if (componentBackingInstance) {
                this.socialContainers.push(componentBackingInstance)
            }
        };
        return (
            <Fragment>
                {data &&
                    <AppCard>
                        <Card.Body>
                            <div className="social-opt-container">
                                <ul id='social-container' ref={dragulaDecoratorRef}>
                                    {this.renderSocialIcons(dragulaDecoratorRef)}
                                </ul>
                            </div>
                        </Card.Body>
                    </AppCard>
                }
            </Fragment>
        )
    }
}

export { App }

I have also tried to remove innerHTML of ""and then return new structure but in this case it returns nothing in html. Please check this once why this issue occurring.