Recalculating ids in array on finalize causes ui to revert to previous state

[ethanfox]

The following code causes wierd behaviour when dragging items. My data functions rely on the section id to be the same as it's position in the array. How can this be solved?

The data updates correctly and if I use my refresh function to get the data from my databse it then renders correctly. I don't undertsand how only updating a value would cause the entire list to get screwed up.

	const handleSectionConsider = (e: CustomEvent<DndEvent<SectionItem>>) => {
		console.log("SECTION CONSIDERATION", e);
		filteredData = e.detail.items;
		//filteredData = [...filteredData];
		//filteredData = [...filteredData];
	};

	const handleSectionFinalize = (e: CustomEvent<DndEvent<SectionItem>>) => {
		console.log("SECTION Finalize", e);

		let newArray = [...e.detail.items]; // Shallow copy for mutation safety

		newArray.forEach((section, index) => {
			section.id = index; // Reset section indices
		});

		console.log("New Array", newArray);

		filteredData = [...newArray]; // Reassign filteredData for reactivity
		documentBody.set([...newArray]); // Ensure reactivity

		// Dispatching events with consistent data
		// dispatch("tableUpdate", {
		// 	sectionIndex: "rowDrag",
		// 	columnKey: "rowDrag",
		// 	itemIndex: "rowDrag",
		// 	updatedData: [...filteredData]
		// });
		dispatch("sectionChange", {
			updatedData: [...filteredData]
		});
	};

https://github.com/isaacHagoel/svelte-dnd-action/assets/22962600/a3c196ea-bfaf-4dfb-a293-f09b3ee97ad4