JSON Fetch returns undefined when consulting a object

Question

I have a pricing table with variable plans. When an user configure your plan, the href of button is updated according with a json file. The code stores each plan variables and return the correct link throught an array of objects.

Here is the JSON Example;

[{
   "planName": "PRO",
    "links": {
        "monthly": {
            "plan1": "https://example.com", 
            "plan2": "https://example.org"
        },
        "yearly": {
            "plan1": "https://example.net", 
            "plan2": "https://example.com"
        }
    }
}]

I get the fetched data, but my object returns undefined and i can't get monthly > plan 1 informations, for example.

Bellow is the code.

function changeLinkWithJSON() {
  var planDuration = document.querySelector('[data-type]').attributes[0].nodeValue;
  var planName = document.querySelector('[plan]').innerHTML;
  var planRef = 'plan1';
  var button = document.querySelector('.select');
  var num;
  if (planName == 'PRO') {
    num = 0
  };
  if (planName == 'PLATINUM') {
    num = 1
  };

  async function getPlanData() {
    let response = await fetch("/plans.json");
    let data = await response.json();
    return data;
  }

  getPlanData()
    .then(data => console.log(data[num].links.planDuration));

}
changeLinkWithJSON();

<ul>
  <li data-type="monthly">
    <h2 plan>PRO</h2>
    <a class="select" class="plan-link" href="#">Buy Plan</a>
  </li>
</ul>

How can i return the expected results instead undefined?