React-Query makes component to rerender multiple times

When i change the page state to cause thw query re run it renders the component 3 times and the first 2 are identical. Why is this happening?

{
    "status": "loading",
    "isLoading": true,
    "isSuccess": false,
    "isError": false,
    "isIdle": false,
    "dataUpdatedAt": 0,
    "error": null,
    "errorUpdatedAt": 0,
    "failureCount": 0,
    "isFetched": false,
    "isFetchedAfterMount": false,
    "isFetching": true,
    "isRefetching": false,
    "isLoadingError": false,
    "isPlaceholderData": false,
    "isPreviousData": false,
    "isRefetchError": false,
    "isStale": true
}   



function App() {
  const [page, setPage] = React.useState(1);
  const state = useQuery(["todos", page], fetchData);

  console.log(state);
  return (
    <>
      <button
        onClick={() => {
          setPage(page + 1);
        }}
      >
        Next
      </button>
    </>
  );
}