react-exercises | Exercise DB with React & Material-UI | User Interface library

My application has a user input a query to make a request to the Pokemon API and the response data is rendered.

If a user inputs a query that doesn't exist in the database, it will trigger the error boundary and a Try Again button to recover from the error by resetting the query state and have the user resubmit a different query. This is the intended behavior.

However, with my current setup, when the user's query does not have any matches, the console will show GET https://pokeapi.co/api/v2/pokemon/foo 404 and Uncaught (in promise) Error: Request failed with status code 404. The user does not see this error though. Nothing to tell the user that their query does not have any matches. I'm aiming to have a more explicit user experience telling the user their submitted request does not have any matches and to click the Try Again button to reset the input and submit a new query. I believe, this is what the error boundary should be doing.

I'm using the following libraries: React Query, React Hook Form, React Error Boundary. I've been suggested to use React Query's onError callback for logging errors and set the property useErrorBoundary: true. Still no luck.

Here's a working example to demonstrate the intended behavior. https://epic-react-exercises.vercel.app/react/hooks/3

Here's my attempt. Please let me know how to solve this. https://codesandbox.io/s/pokedex-5j1jf