Extract Shared Hook from Components

Analyze these components for duplicated logic and extract shared hooks:

```
[PASTE_COMPONENT_1]
```

```
[PASTE_COMPONENT_2]
```

For each identified pattern:
1. **Duplicated logic** — highlight the repeated code with line numbers
2. **Custom hook** — extract into a named hook with TypeScript generics
3. **Parameters** — what the hook accepts for customization
4. **Return value** — typed return object/tuple
5. **Refactored components** — show both components using the new hook
6. **Tests** — unit tests for the extracted hook using renderHook

Rules:
- Only extract if the pattern appears 2+ times
- Keep hooks focused — one responsibility per hook
- Preserve exact existing behavior — no functional changes
- Use TypeScript generics where the types vary between uses