I'm attempting to create a dynamic drop down box based on the selectedIndex of another drop down box. I need help writing a function to achieve this and was hoping someone could help me finish this function. I also need the value and text of the options to be what's in the array. Here's what I have so far:

<form id="myForm">
  <select id="typeSelect">
    <option value="" disabled>--- Select Type ---</option>
    <option value="Type 1">Type 1</option>
    <option value="Type 2">Type 2</option>
    <option value="Type 3">Type 3</option>
  </select>
  <select id="itemSelect"></select>
</form>

< script type = "text/javascript" >
    var typeSelect = document.querySelector('#typeSelect');
    typeSelect.addEventListener('change', onChange);

    function onChange() {
        let itemSelect = document.querySelector('#itemSelect');
        let typeIndex = typeSelect.selectedIndex;
        let itemOptions = {
            0: ['--- Select Type ---'],
            1: ['--- Select Item ---',
                'Item 1',
                'Item 2'
            ],
            2: ['--- Select Item ---',
                'Item 1',
                'Item 2'
            ],
            3: ['--- Select Item ---',
                'Item 1',
                'Item 2'
            ]
        };
        for (var i = 0; i < itemSelect.length; i++) {
            itemSelect.length = 0;
            
        }
    } 
</script>