A tabbed panel shows three topics. Clicking a tab should display that topic's content below. The displayed content never matches the tab that was clicked — it always shows the content of whichever tab was active when the handler was first created.
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 from the render in which useCallback created it — with an empty dependency array, the function was created once on mount and permanently captured activeId at its initial value of 1. So TOPICS.find((t) => t.id === activeId) always searched for id 1 regardless of which button was clicked, and the display never changed. The fix is to look up the topic using the id argument passed directly into the handler — TOPICS.find((t) => t.id === id) — which is always the correct clicked value and does not depend on any stale closed-over state.