React Drag and Drop

/* 
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^3.0.2",
"react-beautiful-dnd": "^13.0.0",
*/

import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
function PopularTags({
	tags,
	existingPopularTag,
	createPopularTagPosition,
}) {

	const handleRemovePopularTagsWithPosition = (selectedDeletedTag, index) => {
		const popularTags = [
			...popularTagsWithPosition.slice(0, index),
			...popularTagsWithPosition.slice(index + 1),
		];
		setPopularTagsWithPosition(reshuffleTags(popularTags));
		/*Added the deleted tag in select option so User can again select the tag  */
		setPopularTagsOptions([
			...popularTagsOptions,
			{
				value: selectedDeletedTag.id,
				label: selectedDeletedTag.name,
			},
		]);
	};

	const updateLastPosition = () => {
		const lastPopularTagWithPosition =
			popularTagsWithPosition && [...popularTagsWithPosition].pop();
		setLastPosition(
			lastPopularTagWithPosition
				? lastPopularTagWithPosition.position + 1
				: 1
		);
	};

	const onDragEnd = ({ destination, source, draggableId }) => {
		let popularTags = [...popularTagsWithPosition];
		let draggedTagItem = popularTags.find(
			(tag) => tag.id === parseInt(draggableId)
		);
		if (!destination) return;
		if (!draggedTagItem) return;
		if (
			destination.droppableId === source.droppableId &&
			destination.index === source.index
		) {
			return;
		}

		draggedTagItem.position = destination.index + 1;
		popularTags.splice(source.index, 1);
		popularTags.splice(destination.index, 0, draggedTagItem);

		setPopularTagsWithPosition(reshuffleTags(popularTags));
	};

	const reshuffleTags = (tags) =>
		tags.map((tag, index) => ({ ...tag, position: index + 1 }));

	const submitPopularTagPosition = (event) => {
		event.preventDefault();

		const popularTagData = popularTagsWithPosition.map((tag) => ({
			id: tag.id,
			position: tag.position,
		}));

		createPopularTagPosition({ tags: popularTagData });
	};

	return (
		<div className="form__group__wrapper">
			<DragDropContext onDragEnd={onDragEnd}>
				<Droppable droppableId="droppable">
					{(provided, snapshot) => (
						<div
							{...provided.droppableProps}
							ref={provided.innerRef}
						>
							{popularTagsWithPosition.map(
								(popularTag, index) => {
									return (
										<Draggable
											key={popularTag.id}
											draggableId={popularTag.id + ""}
											index={index}
										>
											{(provided) => (
												<div
													className="form__group"
													ref={provided.innerRef}
													{...provided.draggableProps}
													{...provided.dragHandleProps}
												>
													<p className="orderable__form-data">
														<span className="badge badge-primary mr-3">
															{ popularTag.position }
														</span>
														{popularTag.name}
														<span
															style={{
																cursor:
																	"pointer",
															}}
															className="close-button"
															onClick={() =>
																handleRemovePopularTagsWithPosition( popularTag, index )
															}
														>
															<span className="icon">
																<i className="ticon t-close"></i>
															</span>
														</span>
													</p>
												</div>
											)}
										</Draggable>
									);
								}
							)}
						</div>
					)}
				</Droppable>
			</DragDropContext>
		</div>
	);
}