Im trying to get the values inside of "info" value but the browser show me something like undefined or object, object.

this is the code

const loadCharacters = async () => {
    try {
        const response = await fetch('https://naruto-api.herokuapp.com/api/v1/characters');
        narutoCharacters = await response.json();
        displayCharacters(narutoCharacters);
    } catch (err) {
        console.error(err);
    }
};

const displayCharacters = (characters) => {
    const htmlString = characters
        .map((character) => {
            return `
            <li class="character">
                <h2>${character.name}</h2>
                <p>${character.id}</p>
                <p>${character.info[0]}</p>
            </li>
        `;
        })
        .join('');
    charactersList.innerHTML = htmlString;
};

loadCharacters();

json

[
  {
    "about": [
      "Akatsuchi (赤ツチ, Akatsuchi) é um shinobi de Iwagakure."
    ],
    "info": {
      "Sexo": "Masculino",
      "Aniversário": "11 de Janeiro",
      "Idade": "Parte II: 20 anos",
      "Altura": "Parte II: 2.00 m",
      "Peso": "Parte II: 137 kg",
      "Tipo Sanguíneo": "B",
      "Ocupação": "Guarda-costas do Tsuchikage",
      "Afiliação": "Iwagakure",
      "Parceiro": "Kurotsuchi",
      "Patente Ninja": "Fase II:  Jōnin",
      "Registro Ninja": "IW-08718"
    },
    "page": "https://naruto.fandom.com/pt-br/wiki/Akatsuchi",
    "name": "Akatsuchi",
    "id": 1,
    "images": [
      "https://gkbzmcahsvowlfjslvnm.supabase.in/storage/v1/object/public/characters/Akatsuchi.webp",
      "https://gkbzmcahsvowlfjslvnm.supabase.in/storage/v1/object/public/characters/Akatsuchi_1.webp"
    ]
  }

I'd try to acces it using character.info[0], character.info['Altura'] but this doesn't work, I'll really appreciete if someone can help. Thanks