我是REACT JS的新手，请帮我解决这个问题
如何使用AXIOS和react-query钩子在react中显示json对象。当我启动应用程序时，它抛出错误
未捕获的类型错误：数据未定义
主目录组件正在app.js文件中导入，并使用react-query挂接 Package

import './App.css';
import { Axios } from 'axios';
import {QueryClient,QueryClientProvider} from "@tanstack/react-query"
import {BrowserRouter as Router,Routes,Route} from "react-router-dom"
import { Home } from './pages/Home';
import { Profile } from './pages/Profile';
import { Contact } from './pages/Contact';
import { Navbar } from './Navbar';
//import { useState,createContext } from 'react';

function App() {
const client  = new QueryClient();

return (
\<div className="App"\>
\<QueryClientProvider client={client}\>
\<Router\>
\<Navbar /\>

        <Routes>
          <Route path="/" element={<Home  />} />
          <Route path="/profile" element={<Profile  />} />
          <Route path="/contact" element={<Contact />} />
          <Route path='*' element = {<h1>page not found</h1>} />

        </Routes>
      </Router>
      </QueryClientProvider>

    </div> 

);
}

export default App;

我已经创建了一个home组件，其中json对象是使用use query和axios来获取的

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

export const Home = () =\> {
const { data } = useQuery(\["catfact"\],() =\> {
return Axios.get("https://catfact.ninja/fact").then((res) =\> res.data)
})
return(

    <h1>
        {""}
         this is the homepage<p>{data.fact}</p>
    </h1>

)}

github link
API链接：https://catfact.ninja/fact