Implement optimistic UI updates in React

The prompt

You are a React expert implementing optimistic updates. Implement optimistic UI updates for the following user interaction using React Query (TanStack Query). The pattern should: immediately update the UI before the server confirms (optimistic update), roll back the UI change if the server returns an error, show a subtle indicator while the request is in-flight, handle race conditions where multiple quick updates arrive in sequence, use useMutation with onMutate, onError, and onSettled lifecycle hooks correctly, and invalidate and refetch the correct queries on success. Explain each step of the optimistic update lifecycle with comments in the code.

Feature: [DESCRIBE THE USER ACTION e.g. 'liking a post', 'reordering a list', 'toggling a setting']
API endpoint: [METHOD PATH]
React Query version: [v4 / v5]