Estoy tratando de mostrar el chiste del día usando RapidAPI. Está imprimiendo "indefinido" dentro del div. Intenté tirar de "configuración" y "remate", pero no funcionó. No tengo esa sintaxis mostrada aquí, pero estoy casi seguro de que ahí es donde me estoy equivocando. Aquí está el JSON de la consola:

 body: Array(1) 0: NSFW: false approved: true author: {name: 'unknown', id: null} date: 1618108661 likes: [] punchline: "Like bro you were there wtf" setup: "Dentist always dumb questions like “when's the last time you flossed?”" type: "question"

Aquí está el archivo main.js

 const RAPIDAPI_KEY = import.meta.env.VITE_RAPIDAPI_KEY; const JOKE_URL = 'https://dad-jokes.p.rapidapi.com/random/joke'; const JOKE_HOST = 'dad-jokes.p.rapidapi.com'; const getData = async (url, host) => { const response = await fetch(url, { method: 'GET', headers: { accept: 'application/json', 'x-rapidapi-key': RAPIDAPI_KEY, 'x-rapidapi-host': host, }, }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); }; const runApiQueries = async () => { //////// GET JOKE RESULTS ////////// const jokeData = await getData(JOKE_URL, JOKE_HOST); console.log(jokeData); //////// UPDATE UI WITH DATA ///////////// app.innerHTML += /*html*/ ` <div class="max-w-2xl w-full bg-yellow-400 border-2 border-gray-300 shadow-lg p-6 rounded-md tracking-wide " > <div class="flex items center mb-4"> <img alt="avatar" class="w-20" src= "./img/donkey1.jpeg" /> <div class= "leading-5 ml-6 sm"> <h4 class="text-xl font-semibold">Dad Joke</h4> <h5 class="font-semibold text-purple-800">Jokes</h5> </div> </div> <div class="text-center"> <q class="italic text-white text-lg" >${jokeData.value}</q > </div> </div> `; } runApiQueries();