useQuery not updating after query key changing in custom hook

import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useAuthContext } from '../AuthContextProvider.tsx';
import { fetchPaginatedListings } from '../queries/actionButtonQueries.ts';
import { useState } from 'react';

const useActionButtonsData = () => {
  const queryClient = useQueryClient();
  const key = 'actionButtons';
  const [page, setPage] = useState(1);

  async function pageUp() {
    setPage((last) => last + 1);
  }

  async function pageDown() {
    setPage((last) => {
      if (last > 1) {
        return last - 1;
      } else {
        return last;
      }
    });
  }

  const { data, isLoading, isError, error } = useQuery({
    queryKey: [key, page],
    queryFn: async () => {
      const data = await fetchPaginatedListings({ page: page, limit: 9 });
      return data;
    },
  });
  return {
    data,
    isLoading,
    isError,
    error,
    pageUp,
    pageDown,
  };
};

export default useActionButtonsData;