On drop html is not render properly

[ArchanaSharma95]

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 json value in parent component which returns new updated data in props, and then I am 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 "<ul>" and then return new structure but in this case it returns nothing in html. Please check this once why this issue occurring.

[ArchanaSharma95]

Is there any solution for this??
Basically .drop event is not occurring when loading component via routing. Please suggest.