Argument of type 'AxiosResponse<any, any>' is not assignable to parameter of type 'SetStateAction<any[]>' and the data is not being accessed in return - rest

Question

I have used next js, useEffect and axios to fetch the data from API's endpoint. I want to get the data to be refreshed each second on my website. I have my code here and at the line number 11, it says "const Data: AxiosResponse<any, any>
Argument of type 'AxiosResponse<any, any>' is not assignable to parameter of type 'SetStateAction<any[]>'". If this is solved, I am not able to access the data in line 38 and 40 by accesing the particular objects. Please help!!
import axios from 'axios';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
export default function HomeMatch() {
const [data, setData] = useState([]);
const getData = async () => {
try {
const Data = await axios('http://api.open-notify.org/iss-now.json');
setData(Data); // set State
console.log(Data);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
getData();
const interval = setInterval(() => {
getData();
}, 5000);
return () => clearInterval(interval);
}, []); // includes empty dependency array
return (
<div className="relative bg-black rounded-xl w-[400px] h-[200px]">
<div className="py-2 px-5">
<div className="grid grid-cols-2 text-center justify-between pt-4 text-xl font-bold">
<p className="text-white uppercase underline-offset-4 decoration-2 decoration-red-600">
longitude
</p>
<p className="text-white uppercase">latitude</p>
</div>
<div className="bg-white rounded-xl w-[350px] h-[50px] absolute top-16">
<div className="flex flex-row items-center justify-center h-full text-xl font-bold gap-14">
<p className="">{data.data.iss_position.longitude}</p>
<p>-</p>
<p className="">{data.data.iss_position.latitude}</p>
</div>
</div>
</div>
</div>
);
}