Cascading Form throwing error when I am using a function after loading the window

Question

I am creating a Contact form which is a cascading form and when I select a value from one drop down the dependent drop down doesn't show any values. When I checked in console the, it is throwing a type error on selecting a value from first drop down.

let data = [{
    Category: 'Provident Fund',
    services: ["PF Registration", 'Employee UAN Genaration', 'Monthly PF Challan Preparation', 'Monthly PF return filing', 'Employee death claim', 'PF department liasoning', 'PF department audit conduct', 'Form 5A Updation', 'Digital Signature Updation', 'Any otheer PF related queries', 'Employee claim withdrawl']

  },
  {
    Category: 'Labour Law',
    services: ['S&E registration', 'Professional Tax registration', 'Monthly deposit challans']
  },
  {
    Category: 'Factory Tax',
    services: ['NSDL', 'NPS', 'UPSC', 'GRE', 'IIT']
  }
];


window.onload = function() {
  var itemSel = document.getElementById("category");
  var subitemSel = document.getElementById("services");

  for (var x in data) {
    itemSel.options[itemSel.options.length] = new Option(data[x].Category, x);
  }
  itemSel.onchange = function() {
    //empty 
    subitemSel.length = 1;
    //display correct values
    for (var y of data[this.value].services) {
      subitemSel.options[subitemSel.options.length] = new Option(y, y);
    }
  }
}

<div class="form-group mt-3">
  <label for="category">Service Category</label>
  <select name="category" class="form-control" id="category" aria-placeholder="Choose from the Services below">
  </select>
</div>
<div class="form-group mt-3">
  <label for="services">Services</label>
  <select name="services" class="form-control" id="services" aria-placeholder="Choose from the Services below">
  </select>
</div>

I was expecting the second drop down to be pre-filled with values.