Возврат объекта, который находится внутри массива другого объекта

Я подключаюсь к API и возвращаю некоторые данные на экран, используя следующее:

return (

    <>

        {Object.values(items).map((item, index) => {
        return <pre>{JSON.stringify(item, null, 2)}</pre>

    </>

})}

Это возвращает объект во внешний интерфейс, который выглядит следующим образом.

[
  {
    "type": "player",
    "id": "account.ac12c743e8044d42a6eafeffa2c3a8cf",
    "attributes": {
      "name": "JohnnyUtah",
      "stats": null,
      "titleId": "pubg",
      "shardId": "stadia",
      "patchVersion": ""
  },
  "relationships": {
      "assets": {
      "data": []
  },
  "matches": {
      "data": [
      {
        "type": "match",
        "id": "473019a4-fe3b-420a-b00e-b99ff2cd8c73"

Я хотел бы в качестве примера получить только идентификатор, как показано ниже:

"id": "account.ac12c743e8044d42a6eafeffa2c3a8cf"

Однако у меня есть объект с массивом объектов внутри него, и я не знаю, как получить к нему доступ.

Я знаком с функцией отображения массива, которую, как мне кажется, мне нужно использовать, но я не знаю, как попасть внутрь этого массива в возвращаемом объекте.

Поэтому я изо всех сил пытаюсь понять, как я получаю это значение.

Добавление полного кода, поскольку это может помочь прояснить ситуацию:

import React, { useEffect, useState } from 'react'

function Player() {

  const [player,setPlayer] = useState('JohnnyUtah')
  const [items,setItems] = useState([])

  useEffect(() => {

    const apiKey = "key";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
    .then(response => response.json())
    .then(json => setItems(json))

  }, [player])

  return (
    
    <>
      <div>
        <button onClick = {() => setplayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick = {() => setplayer('Binder')}>Binder</button>
        <button onClick = {() => setplayer('MartinSheehanUK')}>MartinSheehanUK</button>
      </div>
      <h1>{player}</h1>

      <div>

      <h2>This shows all</h2>
      {data.map((item) => (
          <li key = {item.id}>{item.id}</li>
        ))}
      </div>
      
      <div>
      <h2>This shows only one</h2>
      {data[0].id}
      </div>

    </>

  ) 

};

export default Player

Просто показываю самую последнюю версию моего кода, которая до сих пор не возвращает мне никаких результатов:

import React, { useEffect, useState } from 'react'

function Player() {

  const [player,setPlayer] = useState('JohnnyUtah')
  const [items,setItems] = useState([])

  useEffect(() => {

    const apiKey = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI5MTI0M2U5MC1iMjk5LTAxM2EtN2Q5ZC0xNzRhYzM1YTM1ZGYiLCJpc3MiOiJnYW1lbG9ja2VyIiwiaWF0IjoxNjUyMTkyMTI4LCJwdWIiOiJibHVlaG9sZSIsInRpdGxlIjoicHViZyIsImFwcCI6InB1YnJnLWxlYWRlcmJvIn0.veCjNiRtCzchj2Gli-aZt_0YQjtMvey3io-UUDa0zpQ";

    const options = {
      "headers": {
        "Accept": "application/vnd.api+json",
        "Authorization": `Bearer ${apiKey}`
      }
    }

    fetch(`https://api.pubg.com/shards/stadia/players?filter[playerNames]=${player}`, options)
    .then(response => response.json())
    .then(json => setItems(json))

  }, [player])

  return (
    
    <>
      <div>
        <button onClick = {() => setPlayer('JohnnyUtah')}>JohnnyUtah</button>
        <button onClick = {() => setPlayer('Binder')}>Binder</button>
        <button onClick = {() => setPlayer('MartinSheehanUK')}>MartinSheehanUK</button>
      </div>
      <h1>{player}</h1>

      {items !==undefined && items.length>0 ? items.map((item) => (
        <li key = {item.id}>{item.id}</li>
      )): <div>No result found</div>} 
 

    </>

  ) 

};