Not able to fetch data from API using React Router - reactjs

Question

I am trying to make a demo project using a free API available in web. I am trying to fetch using js fetch method and I am using the latest react-router-dom package
App.js is setting up the route with appropriate loaders
App.js
import "./App.css";
import Root from "./layouts/Root";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Posts from "./pages/Posts";
import { loader as allPostsLoader } from "./pages/Posts";
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
Children: [{ index: true, element: <Posts />, loader: allPostsLoader }],
},
]);
function App() {
return (
<>
<RouterProvider router={router} />
</>
);
}
export default App;
Posts.js
import { json } from "react-router-dom";
import { useLoaderData } from "react-router-dom";
import PostsList from "../components/PostsList";
const Posts = () => {
const data = useLoaderData();
console.log(data);
return (
<PostsList posts={data} />
);
};
export default Posts;
export const loader = async () => {
const response = await fetch("https://dummyapi.io/data/v1/post", {
method: "GET",
headers: new Headers({
"app-id": "63e0971cd1c871fb16613cc4",
}),
body:undefined
});
if (!response.ok) {
throw json({ message: "Count not fetch data!!" }, { status: 500 });
}
return response;
};
PostsList.js
const PostsList = ({ posts }) => {
return (
<div className="all-post">
<h1>All Posts</h1>
<div className="posts-wrapper">
{posts.map((post) => {
<div key={post.id} className="post">
<div className="image">
<img src={post.image} alt="" />
</div>
<h2>{post.text}</h2>
<p>Publish Date: {post.publishDate}</p>
</div>
})}
;
</div>
</div>
);
};
export default PostsList;
Response from API
{
"data": [
{
"id": "60d21b4667d0d8992e610c85",
"image": "https://img.dummyapi.io/photo-1564694202779-bc908c327862.jpg",
"likes": 43,
"tags": [
"animal",
"dog",
"golden retriever"
],
"text": "adult Labrador retriever",
"publishDate": "2020-05-24T14:53:17.598Z",
"owner": {
"id": "60d0fe4f5311236168a109ca",
"title": "ms",
"firstName": "Sara",
"lastName": "Andersen",
"picture": "https://randomuser.me/api/portraits/women/58.jpg"
}
},
{
"id": "60d21b4967d0d8992e610c90",
"image": "https://img.dummyapi.io/photo-1510414696678-2415ad8474aa.jpg",
"likes": 31,
"tags": [
"snow",
"ice",
"mountain"
],
"text": "ice caves in the wild landscape photo of ice near ...",
"publishDate": "2020-05-24T07:44:17.738Z",
"owner": {
"id": "60d0fe4f5311236168a10a0b",
"title": "miss",
"firstName": "Margarita",
"lastName": "Vicente",
"picture": "https://randomuser.me/api/portraits/med/women/5.jpg"
}
}
],
"total": 873,
"page": 0,
"limit": 20
}
I am not able to see the app call in the Network section and now errors are shown as well.