Getting Missing queryFn error when using React query

here is the code I am using. it doesn't make any sense to me because the error is basically telling me I am not passing it a function when using query but I am. and I am not calling the function directly either. any help would be a appreciated

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
//import Posts from './components/Posts'
import axios from "axios";
import { useQuery } from "react-query";
import React from "react";

async function fetchPosts() {
  const data = await fetch("http://swapi.dev/api/planetsd");
  return data.json();
}

function App() {
  const { data, status, error } = useQuery(
    "stuffthing",
    async () => await fetchPosts()
  );
  // first argumello\'ent is a string to cache and track the query result
  if (status === "error") {
    console.log(`${error} new error`);
  }
  if (status === "loading") {
    return <div>loading</div>;
  }

  return (
    <div className="container">
      <h1>Posts</h1>
      {data}
    </div>
  );
}

export default App;