This is the code I currently have in the project, but I can not even run it because I keep getting the error I brought in the title: Uncaught TypeError: (0, react_query__WEBPACK_IMPORTED_MODULE_9 __. UseQuery) (...) is not a function

The debugger shows that it's coming right from the line where i declared the useQuery object. Any ideas?

import {
  useQuery,
  QueryClient,
  QueryClientProvider,
} from 'react-query';

const queryClient = new QueryClient()
const api = axios.create({
  baseURL: `http://localhost:5000/api`,
});

export default function QueryProvider() {
   return (
     <QueryClientProvider client={queryClient}>
       <App/>
     </QueryClientProvider>
   )
}

  function App() {
  const classes = useStyles();
  const [table, setTable] = useRecoilState(TableProvider);


  const { status, data } = useQuery(
      'todos',
      async () => {
      const res = await api.get("/")
      return res.data
    },
    {
      refetchInterval: 1000,
    }
  )

 return(
 <p>data</p>
 ):
}