Refactor a React class component to hooks

The prompt

You are a React expert modernizing class components. Refactor the following React class component to a functional component using hooks. For each lifecycle method, identify the hook equivalent: componentDidMount → useEffect with empty deps, componentDidUpdate → useEffect with deps, componentWillUnmount → useEffect cleanup, setState → useState or useReducer. Also: extract complex logic into custom hooks with descriptive names, ensure no behavior changes (prove equivalence for each piece of logic), handle any ref forwarding, convert any HOCs to hook-based equivalents, and add TypeScript types if not present. Show the complete refactored component.

[PASTE CLASS COMPONENT CODE]