How to imperatively handle an error, with react-query?

Being that react-query is heavily based on the declarative approach, the error handling I see in all examples looks something like this:

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {//If there is an error, render different JSX
     return <span>Error: {error.message}</span>
   } 
   
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

But what if I want to just show an alert, in case of an error? Or perhaps, i’m using some error handling interface, that has an imperative trigger? Something like this:

if (isError) alert(`An error has occurred: ${error.message}`)

In this case, I get two alerts. Something causes the component to re-render, which of course leads to “duplicate” error handling.

Why is this important to me? Because my error handling logic might not be based on rendering some specific JSX within my component, but rather on some manual one-time trigger. The alert is just a basic example.

Any suggestions will be greatly appreciated!