React + TypeScript List Manager

Context

During an onsite interview, you are tasked with building a small user interface. Implement a list manager using React and TypeScript that supports adding, editing, removing, and filtering items. The solution must leverage modern React hooks and adhere to correct TypeScript typings.

Requirements

1. List Functionality: Implement a list of items with the following features:
   • Add a new item.
   • Edit an existing item inline.
   • Remove an item.
   • Filter items based on a text query.
2. React Patterns and Hooks:
   • Utilize useState for managing component state.
   • Employ useCallback for optimizing event handlers.
   • Use onChange for input field changes and onClick for button interactions.
   • Integrate useRef for at least one uncontrolled input or for managing focus.
   • When rendering lists, map over items using stable, unique keys (avoid using array indices).
3. TypeScript:
   • Ensure correct TypeScript typings for event handlers (e.g., React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>).
4. Explanation: Be prepared to discuss and explain the following:
   • The difference between controlled and uncontrolled inputs, your chosen approach, and the rationale behind it.
   • The nature of asynchronous state updates in React and when to use functional updates.
   • How you pass and correctly type parameters for event handlers.
5. Security: Discuss relevant UI security concerns, such as Cross-Site Scripting (XSS), and propose mitigation strategies.
6. If Time Permits: Describe potential extensions to the application and outline a comprehensive testing strategy.

Assumptions

• The entire solution should be contained within a single React component for simplicity.
• Items in the list will have a simple structure: { id: string, text: string }.
• The filtering mechanism should perform a case-insensitive substring match.