React + TypeScript List Manager

Context

You are building a small UI during an onsite interview. Implement a list manager using React and TypeScript that supports add, edit, remove, and filter operations. Use modern React hooks and correct TypeScript typings.

Requirements

1. Implement a list of items with these features:
   • Add a new item.
   • Edit an existing item inline.
   • Remove an item.
   • Filter items by a text query.
2. React patterns and hooks:
   • useState for state.
   • useCallback for event handlers.
   • onChange for input changes; onClick for buttons.
   • useRef for at least one uncontrolled input or focusing.
   • Map over lists with stable keys (do not use array index).
3. TypeScript:
   • Correctly type event handlers (e.g., React.ChangeEvent <HTMLInputElement> , React.MouseEvent <HTMLButtonElement> ).
4. Explain:
   • Controlled vs. uncontrolled inputs (what you chose and why).
   • Asynchronous state updates and when to use functional updates.
   • How you pass and type parameters for event handlers.
5. Security:
   • Discuss relevant UI security concerns (e.g., XSS) and mitigations.
6. If time permits:
   • Describe extensions and a testing strategy.

Assumptions

• Use a single React component for simplicity.
• Items can be a simple shape: { id: string, text: string }.
• Filter is case-insensitive substring match.