我试图取消react tansktack查询中的一个查询。我有一个钩子来检测用户是offline还是online。当用户离线时，我想立即取消查询以显示一些离线下载的数据。我已经尝试过了，但是查询没有取消，只是失败了。
我的逻辑是：

export default function Body({ searchText, id, alvoId }: BodyProps) {
  const { isOnline } = useOnlineStatus();
  const cancelToken = useRef<CancelTokenSource>();

  const { data, isError, isLoading, refetch  } = useQuery({
    queryKey: [`dsc/${id}`],
    queryFn: async () => {
      cancelToken.current = axios.CancelToken.source();
      const token = cancelToken.current?.token;

      const promise = await actionsGet(id, token);

      return promise;
    },
  });

  if (isError && isOnline) {
    showToast('customToast', 'Error', 'Verifique a conexão com a internet', 'error');
  }

useEffect(() => {
    if (isOnline) {
      setDisciplina(data?.content || []);
      handleDownloadedIds();
    } else {
      cancelToken.current?.cancel();
      if (!data) {
        handleDownloadedDisciplina();
      } else {
        setDisciplina(data?.content || []);
        handleDownloadedIds();
      }
    }
  }, [data, isOnline]);

我的版本：

"@tanstack/react-query": "^4.24.4",

它正在调用的查询：

export async function actionsGet(
  id: string,
  cancelToken?: any
): Promise<any> {
  const response = await api.get(`/data/${id}`, {
    headers: {
      modulo: 'STUFF',
    },
    cancelToken: cancelToken,
  });

  return response.data;
}