State is modified before state setter is called - reactjs

Question

I have a form with a single input that takes some value, sends a request to the backend to create a new entity and updates the frontend by adding the new value to the collection of items.
Handler which gets executed on form submit:
const handleItemInsert = async (item: any): Promise<void> => {
console.log('BEFORE ITEM CREATE', items);
const newItem: IItem = await service.addNewItemAsync(item);
console.log('AFTER ITEM ADD', items);
console.log(newItem);
setItems((items) => [...items, newItem]);
}
My issue is that the first time I add a new item the state is somehow modified(the newItem is added to the items collection) before even the service gets called. Furthermore, the new item gets added twice and I am not sure why. Every related function that I've checked is called once and I have this problem with and without using StrictMode, so the issue shouldn't be based on that.
Here is a full Codesandbox sample of the issue.
I've put logs in the function calls that reflect the problem in the flow(you can check them in the codesandbox console window). I might be missing something really trivial but at this point I really don't see where the error lies.
Also, if the problem lies in the handling of the form submit itself through antd's onFinish method(as I am passing an async method), it should still execute update logic after the logs and don't add the item twice.
Any help will be appreciated.

Answer 1

Since your service is mutating ITEMS and you set that value to the state, you are inadvertently modifying React's state.
Update you effect to create a shallow copy of items when you set them:
useEffect(() => {
async function fetchItems() {
console.log("FETCH ITEMS CALLED.");
const items = await service.getAllItemsAsync();
console.log("INITIAL ITEMS", items);
setItems([...items]);
}
fetchItems();
}, []);