Caching with react-query and react-router-dom

I'm trying out react-query and want to see it caching. I have a page that gets a list of Books.

Note, some code obviously left out for brevity just trying to show the important parts.

const useBooks = options => {
  return useQuery(['books', options], bookApi.fetchBooks(options));
}

const Books = () => {
  useEffect(() => () => console.log("unmount"), []);
  const [options, setOptions] = useState({}); // options ex: { page: 1, search: "test"}
  const {error, isLoading, data} = useBooks(options);

  return books.map(book => <div>{book.name}</div>;
}

Now this Books is a "page" in my app using react-router-dom:

const App = () => {

  return (
    <Router>
      <>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/books">
          <Books />
         </Route>
      </>
     </Router>
    )
  }

When I go back and forth between "Home" and "Books" (by clicking Nav links in my app) I see the books fetch hitting the network every time. I also see "unmount" in the console.

I originally had the Routes wrapped in a Switch, and removed this but the Books component still appears to unmount. I am hoping it will not unmount and I will not see the network fetch, and the books will be pulled from the react-query cache. I also tried making the useBooks hook not use the search options param but the results were the same.

How do I use avoid the network fetch in my scenario?