I am currently learning TypeScript in React so i was working on learning how to make API request with typescript I am fetching a single data by Id the result of the api request is displaying on my web page but i encountered an error the typescript compiler is saying Property does not exits
here is my code

import { To, useParams } from "react-router-dom";

import axios from "axios";

import { useState, useEffect } from "react";

const SinglePOST = () => {

  type Todo = {

    title: string;

    body: string;

    userId: number;

    id: number;

  };

  const { id } = useParams();

  const [data, setData] = useState<Todo[]>([]);

  const [loading, setLoading] = useState<boolean>(false);

  const [isError, setError] = useState<any>(null);

  useEffect(() => {

    const singleReq = async () => {

      try {

        setLoading(true);

        const res = await axios.get<Todo[]>(

          `https://jsonplaceholder.typicode.com/posts/${id}`,

        );



        await setData(res.data);

        console.log(res.data);

      } catch (err) {

        setError(err);

      } finally {

        setLoading(false);

      }

    };

    singleReq();

  }, [id]);



  return (

    <div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>

      <div className='w-full flex justify-center '> Single Post {id}</div>

      {loading && <p>...Loading</p>}

      {isError && <p> Error in getting post</p>}



      <div className='text-2xl'> {data.title}</div>

      <div className=' text-xl'> {data.body}</div>

    </div>

  );

};



export default SinglePOST;

This is the error it was displaying

Property 'title' does not exist on type 'Todo[]'

Property 'body' does not exist on type 'Todo[]'