Basic Autocomplete

Build a text input that filters a fixed list of countries as you type and lets you pick a match — the core of every autocomplete, without the network. In React the whole thing is a small piece of derived state: the input owns a query string, and the dropdown is computed from it, not stored separately.

Task

The starter App.tsx renders an empty input over a fixed COUNTRIES array. Make it interactive:

1. Hold the state. Track the typed text with useState('') (query) and an open boolean with useState(false).
2. Filter as you type. Derive matches — the countries whose lowercase text includes query.toLowerCase(). Keep it empty when query is blank.
3. Show the dropdown. Render matches as <li className="suggestion"> inside a <ul className="suggestions">, but only when open and there is at least one match.
4. Pick a match. Clicking a suggestion fills the input with that value and closes the dropdown.

Examples

• Typing ch shows a dropdown with Chile and China; typing chi narrows it, then chin leaves just China.
• Clearing the input hides the dropdown entirely — an empty query means no suggestions.
• Clicking Chile sets the input to Chile and closes the list.

Notes

• The dropdown is derived, not stored. Don't keep a separate results state in sync with query — compute matches during render.
• Case-insensitive substring. Lowercase both sides and use String.includes for a simple contains match.
• open is separate from matches. You need an explicit flag so a click can close the list even though the picked value still matches itself.
• Styling (dark theme, input, dropdown) is already in styles.css; focus on the state.