Convert Class Component to React Hooks

Refactor this React class component into a functional component using React Hooks. Apply these transformations:
- Replace this.state and this.setState with useState hooks
- Convert lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount) to useEffect hooks with proper dependency arrays
- Replace this.props with destructured props parameter
- Convert class methods to const functions or useCallback where appropriate
- Replace createRef with useRef
- Preserve all existing functionality, event handlers, and conditional rendering
- Add TypeScript types for props and state if not already present
- Ensure cleanup functions are added to useEffect where necessary (event listeners, subscriptions, timers)