reactjs-将API调用数据设置为状态，但在分配类型时遇到问题

Earth.tsx组件，然后尝试将数据渲染到浏览器。

保存到状态的API数据：

{
date: '2018-01-03T16:50:46.890000',
 id: 'LANDSAT/LC08/C01/T1_SR/LC08_025039_20180103', 
resource: {…}, 
service_version: 'v5000', 
url: 'https://earthengine.googleapis.com/v1alpha/project…bccd48-3aa76fabdd69b028540a8edb2800e72b:getPixels'
}

问题是，当我尝试渲染数据时，会出现错误

对象可能未定义

关于如何解决这个问题，有什么建议吗？我有一种感觉，这与我所属的州有关。

Earth.tsx

import { useState, useEffect,FC } from "react"
import axios, { AxiosResponse } from "axios"

const Earth = ():JSX.Element => {

    interface IEarth {
        date:string,
        id:string,
        resource:{
            dataset:string,
            planet:string
        }
        service_version: string,
        url: string
    }

    // type PhotoPayload = IEarth[]

    const [data,setData] = useState()
    const url = 'https://api.nasa.gov/planetary/earth/assets?lon=-95.33&lat=29.78&date=2018-01-01&&dim=0.10&api_key=DEMO_KEY'

    const getData = ():void => {
        axios.get(url)
        .then((res: AxiosResponse) => {
            setData(res.data)
        })
    }

    useEffect(() => {
        getData()
    },[])

    console.log('data', data)

    return(
        

            {data.url}
        
    )
}

export default Earth