json place holder からreact queryとaxiosを用いてapiを叩いて取得したオブジェクトの一部をブラウザに表示する

Question

実現したいこと

json place holder からreact queryとaxiosを用いてapiを叩いて取得したオブジェクトの一部をブラウザに表示する

前提

ゴリゴリの初学者です、、、ご教示お願いいたします。
ReactとTypeScriptでreact queryを試してみたく、apiを叩いてブラウザに表示しようとしています。
取得したAPIからオブジェクトの中身を表示しようとしたところ画面に反映されません。

発生している問題・エラーメッセージ

query.ts:446 Missing queryFn for queryKey '["albums",null]'

該当のソースコード

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ReactQuery.tsx

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

type Album = {
  userId: number;
  id: number;
  title: string;
};

const fetchAlbums = async () => {
  const result = await axios.get<Album[]>("https://jsonplaceholder.typicode.com/albums");
  console.log(result);
  return result.data;
};

export const ReactQuery = () => {
  const { isLoading, error, data } = useQuery<Album[]>(["albums", fetchAlbums]);
  if (error) return <p>エラーです</p>;
  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      <p>React Query</p>
      {data?.map((album) => (
        <p key={album.id}>{album.title}</p>
      ))}
    </div>
  );
};

試したこと

出来る範囲で問題の確認をしたところ、ブラウザをローディング後に【Loading...】→【エラー】の表示がされています
エラーの内容は上記ですが、以上の事から、そもそもAPIちゃんと取得できてないのでは、、、と思い色々試しましたが力尽きました、、、
デベロッパーツールのネットワークの所を確認しましたが、APIにアクセスした様子はありませんでした

補足情報（FW/ツールのバージョンなど）

"@tanstack/react-query": "^4.33.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.46",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"axios": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",

Answer 1

ReactQuery.tsx 20行目
useQuery<Album[]>(["albums", fetchAlbums]);
になっていた。
シンプル入力ミスでした。。。正しくは

useQuery<Album[]>(["albums"], fetchAlbums);