React part 2 Fatching data

I’m following the course as it is no variants at the moment and I’m component and I am encountering the following:

Error 1 on line 20: queryKey: [“todos”],

No overload matches this call.
The last overload gave the following error.
Object literal may only specify known properties, and ‘queryKey’ does not exist in type ‘readonly unknown[]’…

The last overload gave the following error.

Error 2 on line 28: {todos?.map((todo) => (
The error is:
Property ‘map’ does not exist on type ‘NonNullable’.

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

interface Todo {
  id: number;
  title: string;
  userId: number;
  completed: boolean;

const fetchTodo = () => {
    .then((res) =>;

const TodoList = () => {
  const { data: todos, error } = useQuery<Todo[], Error>({
    queryKey: ["todos"],
    queryFn: fetchTodo,

  if (error) return <p>{error.message}</p>;

  return (
    <ul className="list-group">
      {todos?.map((todo: Todo) => (
        <li key={} className="list-group-item">

export default TodoList;

Does anybody have any idea what’s going on?