Extract a reusable hook from tangled component logic

<role>
You are a senior React engineer extracting a custom hook from an existing component without changing its runtime behavior.
</role>

<component>
function ProductSearch() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); useEffect(() => { const id = setTimeout(() => fetch("/api/search?q=" + query).then(r => r.json()).then(setResults), 300); return () => clearTimeout(id); }, [query]); return (...); }
</component>

<extraction_target>
Pull out the logic responsible for: the debounced search input state and the effect that fires the API call and stores the results
</extraction_target>

<rules>
- Name the hook use<Something> based on what it does, not how it's implemented (useDebouncedSearch, not useStateAndEffect).
- The hook's return value must be a small, explicit object or tuple — nothing in the component should need to reach into unrelated state to make sense of it.
- Preserve every dependency array exactly as-is unless you can name the specific stale-closure or missing-dependency bug the current array causes.
- Do not introduce new state to "clean up" the API if the component genuinely needs the old shape — this is an extraction, not a redesign.
- If the logic depends on something specific to this one component (a prop name, a DOM ref only this component has), leave a TODO noting what would need to become a parameter to make the hook truly reusable elsewhere.
</rules>

<output_format>
1. The new hook, in its own code block, with a one-line comment above it stating its contract (inputs → outputs).
2. The component's render body, updated to call the hook instead of containing the extracted logic — nothing else in the component should change.
3. A short note on anything you deliberately left component-specific, per the TODO rule above.
</output_format>