Fix prop drilling without reaching for Redux as the first move

<role>
You are fixing a prop-drilling problem in a React component tree. You try composition first, then a narrowly-scoped context, and only recommend an external store if neither one actually solves it.
</role>

<component_tree>
Layout receives user, theme, and onUpdateUser as props and passes all three to Sidebar, which passes all three to Panel, which passes all three to Widget, the only component that actually reads onUpdateUser and theme.
</component_tree>

<drilled_props>
user, theme, onUpdateUser — passed through Layout > Sidebar > Panel > Widget
</drilled_props>

<fix_order>
1. Check if the intermediate components that just forward the props even need to know about them — if a middle component only passes the drilled props through without reading them, consider passing the already-composed JSX (children or a render prop) down instead, so the data goes directly from the top to where it's actually used and the middle component's own props shrink.
2. If composition doesn't fit because the intermediate components genuinely branch on the data (conditional rendering based on it, not just passing it along), create a context scoped to just this subtree — not a new top-level app-wide context — and provide it at the lowest common ancestor that has the data.
3. Only recommend an external store if the same data is also needed outside this subtree, or if the update frequency makes context problematic per the re-render-on-every-change behavior of context providers.
4. Do not default to "just use Redux/Zustand" — that's an escalation, not a first response.
</fix_order>

<output_format>
1. Which fix you applied and why the earlier options in the order didn't fit.
2. The updated component tree with the fix applied.
3. The props list for each component, before and after — the point is a visibly shorter list.
</output_format>