Attempting to reorder state array causing two rerenders in React component

I am encountering an issue with multiple rerenders when trying to reorder items in a state array, and it’s been bothering me for a number of days.

I have looked at multiple similar questions regarding arrays of state and none of the answers have been able to solve my problem – I am not sure what the source of the problem is either, some answers I have seen point to strict mode, and many point to issues regarding working with state directly.

I have an array of state made up of ‘items’ that looks like this:

[
    {
        "id": 1,
        "order": 2,
        "item_type": "content",
        "content": {
            "id": 2,
            "title": "Content 2",
            "body": "<p>Add content here 2</p>"
        }
    },
    {
        "id": 6,
        "order": 1,
        "width": "50%",
        "item_type": "content",
        "content": {
            "id": 1,
            "title": "Content 1",
            "body": "<p>Add content here 1</p>"
        },
    }
]

Each element of the state is used to provide props for a component rendered in the usual way with a .map() function.

The issue I am having, is that the delete function passed to these child components which ‘removes’ an item when a button is clicked causes two rerenders in quick succession after state is set. I am using console.log() to log the state, and after the first rerender the array is correct, but in the second, the nested content property appears incorrectly, which is why I believe it might be to do with working with state directly. The code for this function is below.

  const removeItem = index => {
    // Can't use spread syntax to copy state since we are working with nested objects.
    const items = JSON.parse(JSON.stringify(items));

    // Append delete flag to item, and move it to end of state array.
    const itemToDelete = items.splice(index, 1)[0];
    itemToDelete.delete = true;
    items.push(itemToDelete);

    // Reorder array.
     items.forEach((_, i) => {
       items[i] = { ...items[i], order: i + 1 };
     });

    setDashboardItems(items);
  };

When I comment out the forEach loop, the state resets fine, but after reordering, I get the issue with two rerenders. I have tried multiple things, including putting this exact logic in a setState callback and using Array.reduce() instead in the setState callback, (which worked to an extent, but didn’t give me the capability to reorder items as I would like).

I should also note that when I prevent the elements from rendering (by setting the state to an empty array) there is only one rerender, so it could be an issue with the child components, but looking at them I can’t see how their rendering would cause a second rerender – I am happy to provide more detail on these if it would help.

In short, my question is if there is anything immediately obvious that I have done wrong with the function, or if anyone has experienced similar issues, and what steps I could take to solve/debug the problem myself?