title: How to get React Error Boundary to reset state with Try Again button?
body: <p>My Pokemon application is using the following libraries: React Hook Form, React Query, and React Error Boundary.</p>
  <p>When a request hasn't been made, it will should render <code>No Pokemon Yet, Please Submit a Pokemon.</code> When an error occurs, a <code>Try Again</code> button will render in place of <code>No Pokemon Yet, Please Submit a Pokemon</code>. When the <code>Try Again</code> button is clicked, <code>No Pokemon Yet, Please Submit a Pokemon</code> will again be shown and the search input is reset with the user again able to make a query.</p>
  <p>However, my implementation is not working. Initially, <code>No Pokemon Yet, Please Submit a Pokemon</code> is not being rendered prior to the user submitting a query. Also, when I type a query that doesn't have any matches, the error boundary is not triggering to tell the user what has happened and allow them to resubmit a query after clicking the <code>Try Again</code> button. The DevTools Network tab gives me a 404.</p>
  <p>React Error Boundary will only trigger if the <code>img</code> from <code>PokemonInfo</code> is uncommented. It renders <code>Cannot read property 'front_default' of undefined</code>.</p>
  <p>Please let me know what I'm doing wrong.</p>