Can't display single data fetched by API. React-JS

I'm trying to display the required data from an API response but it's not visible. Here's the API fetch code:

async function getNFTData(){
    const response = await fetch(`https://api.rarible.org/v0.1/items/${chain}:${address}:${Id}`)
    const data = await response.json()
    setNfts(data.items)
    console.log(data);
  }

And it displays data perfectly in console, but when I try to display data in frontend I get no result. Here's the code to display data:

getNFTData?.meta?.name

Here's the API response in console.log:

auctions: [] blockchain: "POLYGON" collection: "POLYGON:0xdf07c9a4e4e0adafeaf769934e933277471f4c36" contract: "POLYGON:0xdf07c9a4e4e0adafeaf769934e933277471f4c36" creators: [{…}] deleted: false id: "POLYGON:0xdf07c9a4e4e0adafeaf769934e933277471f4c36:55" lastUpdatedAt: "2022-05-15T20:48:12.780Z" lazySupply: "0" meta: {name: 'Tiny Turtles #55', description: 'Tiny Turtles is a collection of 3270 randomly gene…urated NFTs that exist on the Polygon Blockchain.', tags: Array(0), genres: Array(0), attributes: Array(3), …} mintedAt: "2022-05-15T20:48:11Z" originOrders: [] pending: [] sellers: 0 supply: "1" tokenId: "55" totalStock: "0"

Now if I use; getNFTData.meta.name, I get an error the meta not defined but when I use getNFTData?.meta?.name nothing is displayed and there's no error in console.log.

I'm confused what am I doing wrong.