От куда берётся лишний вызов? В react при использование react-query и zustand

Решил для своих тестов сделать небольшое приложение Todo list с использованием react-query и zustand. Все работает хорошо но возникли вопросики по дополнительному вызову компонента Todolist.jsx внутри него я использую

const { data: response, isLoading, isError, error } = useFetchTodo();
const data = response?.data;

Получаю все что мне необходимо для работы, так-же я имею компонент TodoPagination.jsx который содержит 2 кнопки, назад и далее, для пагинации для них была сделана отдельная функция в zustand

const { incrementPage, decrementPage, page, limit, totalCount } = useStoreTodoPagination();

Вот сам хук моего store

export const useStoreTodoPagination = create(persist((set) => ({
    page: 1,
    limit: 5,
    totalCount: 7, // Временное значение

    setPage: (value) => set({ page: value }),
    incrementPage: () => set(state => ({ page: state.page + 1 })),
    decrementPage: () => set(state => ({ page: state.page - 1 })),
    setLimit: (value) => set({ limit: value }),
    setTotalCount: (value) => set({ totalCount: value }),
}), {
    name: "x-total-count-todo-list"
}));

А так-же мой хук запроса useQuery

export function useFetchTodo() {
    const filter = useStoreTodoFilter(state => state.filter);
    const search = useStoreTodoSearch(state => state.search);
    const { page, limit, setTotalCount } = useStoreTodoPagination();

    console.log('useFetchTodo');

    return useQuery(['todo-list', filter, search, page, limit], async () =>
        await fetchTodo(filter, search, page, limit),
        {
            keepPreviousData: true,
            refetchOnWindowFocus: false,
            retry: 1,
            onSuccess: (response) => {
                //setTotalCount(parseInt(response.headers.get('x-total-count')));
            }
        });

};

Так вот я ни как не могу понять, от куда берется лишний вызов, при нажатие на кнопку мы меняем page что естественно отлавливает хук useFetchTodo, и запускает запрос, это 1 вызов компонента TodoList.jsx потом он заканчивает получает ответ от сервера это 2 вызов что Логично и понятно но откуда еще один?

Как описано на картинке, 1 вызов понятно, 2 хз от куда, он появляется сразу, а 3 после ответа, сейчас там стоит задержка.

Фулл код можете посмотреть на codesandbox.io Можете открыть ссылку, после загрузки очистить консоль(чтобы не запутаться) и перейти на другую страницу, чтобы увидеть что происходит.