Debug a React state bug with a systematic root-cause prompt

I have a bug in a React component. Help me find the root cause — do not just patch the symptom.

Component code:
[paste the relevant component(s), including any custom hooks and context providers involved]

Bug description:
- What I expected to happen: [describe]
- What actually happens: [describe]
- Steps to reproduce: [describe, including how often it reproduces — always / intermittently / only on specific actions]
- Relevant console errors or warnings: [paste exactly, or say "none"]

Tech context: React [version], [state management approach], [relevant libraries like React Query, Redux, Zustand].

Please work through this systematically:
1. Trace the component's render and state-update flow step by step, based only on the code shown — don't assume behavior you can't see
2. Identify every place state could become stale, be set based on stale closures, or update in an order that causes the described symptom
3. Check for classic causes: missing/incorrect dependency arrays, state updates in render, derived state that should be computed instead of stored, mutating state directly, race conditions between async updates
4. State your most likely root cause and your confidence level, with your reasoning
5. If there are multiple plausible causes, list them ranked by likelihood instead of guessing one and moving on
6. Propose the minimal fix for the actual root cause — not a broader rewrite
7. Suggest a test that would have caught this bug, and that will catch a regression

If the code I've shown isn't enough to be sure, tell me exactly what additional code or logs you need instead of guessing.