Client side error 400. What's wrong

...
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>
);

...
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>
);

import { useQuery } from "@tanstack/react-query";
import fetchPostsFn from "../../lib/fetchPosts";
import { Post } from "../../typesAndInterfaces/plan";
const WinnersOnHomePage = (): JSX.Element => {
  const postsQuery = useQuery({
    queryKey: ["winners"],
    queryFn: fetchPostsFn,
  });

  // check if data is loading
  if (postsQuery.isLoading) return <h1>Loading...</h1>;

  // check for error
  if (postsQuery.isError)
    return <pre>{JSON.stringify(postsQuery.error.message)}</pre>;

  // map the posts and return the jsx
  return (
    <>
      {postsQuery.data?.winners.map((post: Post) => (
        <div key={post.id}>
          <h3>{post.name}</h3>
        </div>
      ))}
    </>
  );
};
export default WinnersOnHomePage;

import { useQuery } from "@tanstack/react-query";
import fetchPostsFn from "../../lib/fetchPosts";
import { Post } from "../../typesAndInterfaces/plan";
const WinnersOnHomePage = (): JSX.Element => {
  const postsQuery = useQuery({
    queryKey: ["winners"],
    queryFn: fetchPostsFn,
  });

  // check if data is loading
  if (postsQuery.isLoading) return <h1>Loading...</h1>;

  // check for error
  if (postsQuery.isError)
    return <pre>{JSON.stringify(postsQuery.error.message)}</pre>;

  // map the posts and return the jsx
  return (
    <>
      {postsQuery.data?.winners.map((post: Post) => (
        <div key={post.id}>
          <h3>{post.name}</h3>
        </div>
      ))}
    </>
  );
};
export default WinnersOnHomePage;

// fetch 3 winners from posts to display on the home page

import { Response } from "../typesAndInterfaces/plan";

async function fetchPostsFn(): Promise<Response> {
  const url = "http://localhost:3000/api/v1/posts/getWinnersOnHomePage";

  const res = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });

  // check for if res fails
  if (!res.ok) {
    const exactErrorMsg = await res.json();
    throw new Error(
      `Request failed with status ${res.status}, ${exactErrorMsg.message}`
    );
  }

  // get good res at this stage
  const data: Response = await res.json();

  return data;
}
export default fetchPostsFn;

// fetch 3 winners from posts to display on the home page

import { Response } from "../typesAndInterfaces/plan";

async function fetchPostsFn(): Promise<Response> {
  const url = "http://localhost:3000/api/v1/posts/getWinnersOnHomePage";

  const res = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });

  // check for if res fails
  if (!res.ok) {
    const exactErrorMsg = await res.json();
    throw new Error(
      `Request failed with status ${res.status}, ${exactErrorMsg.message}`
    );
  }

  // get good res at this stage
  const data: Response = await res.json();

  return data;
}
export default fetchPostsFn;