не может отобразить вложенный объект json из URL-адреса в реакции js

Question

Я пытаюсь получить доступ к вложенному объекту, но он отображает undefined

почему он отображает неопределенные значения, дайте подробное объяснение

  useEffect(() => {
const getVaccineData = async() => {
  await fetch("https://disease.sh/v3/covid-19/vaccine")
      .then((response) => response.json())
      .then((data) => {
          const moreInfo = data.data.map((vaccine,i) =>({
            candidate: vaccine.candidate,
            details: vaccine.details,
            trialPhase: vaccine.trialPhase,
            institutions: vaccine.institutions,
            funding: vaccine.funding,
          }))
          console.log("moreInfo = "+moreInfo.institutions)
          setMoreInfo(moreInfo)
      }
      
      );
};
getVaccineData();},[])

и json структура

    {
  "source": "string",
  "data": [
    {
     "candidate": "string",
      "sponsors": [
        "string"
      ],
      "details": "string",
      "trialPhase": "string",
      "institutions": [
        "string"
      ],
      "funding": [
        "string"
      ]
    }
  ]
} 

и как получить доступ, помогите пожалуйста в этом