Design a Debounced Product Search Box

Implement a client-side product search field. You are given a ready-made searchProducts(query, signal) function that calls the backend and resolves to a list of products. The backend returns at most ten products and ranks them by relevance; preserve that order in the UI. The text input must be a controlled React input. Do not call searchProducts on every keystroke. Instead, wait until the user has stopped typing for 300 ms, then perform the search. Each new input change must…