A tabbed panel shows three topics. Clicking a tab should display that topic's content below.
Click Topic 2 - the content area still shows Topic 1's text. Click Topic 3 - still shows Topic 1. No matter which tab you click the content never changes from the initial one.
The click handler runs - so ask yourself which version of the data it is actually reading.
The click handler runs - so ask yourself which version of the data it is actually reading.
Why this fixes it
`handleSelect` closed over `activeId` at mount with an empty dependency array, permanently capturing it at `1`. So `TOPICS.find((t) => t.id === activeId)` always searched for id `1`. The fix looks up the topic using the `id` argument passed into the handler - `TOPICS.find((t) => t.id === id)` - which is always the correct clicked value and does not depend on stale closed-over state.