Three.js select GLTF object from a dropdown with DAT.gui

Question

I started messing about with Three.js a couple of months ago. I have basic js knowledge, most of the code was adapted from the Three.js Examples.

I want to load a model selected from a dropdown list. There is only one model displayed at once, so I didnt want to add a new gltf loader for each model. I have 1 gltf loader and I want to change the path based upon the option the user selects from the dropdown.

VARIABLES

let pathSelected, pathHe, pathCat, pathGears; 
pathHe = ('./MODEL/he.gltf');      
pathCat = ('./MODEL/cat/cat.gltf');                    
pathGears = ('./MODEL/gears/gears.gltf');  

.....

GLTF LOADER

function init() {
...
  loader = new GLTFLoader();
  loader.load(pathSelected, function (gltf) {
    gltf.scene.traverse(function (child) {
      if (child.isMesh) {
        children.push(child);
      }
    });
...
}

DAT.GUI PANEL

function createPanel() {
...
var objSelector = objectShow.add(settings, 'modelOptions', ["HE", "Cat", "Gear Box"]).name("Seclect").listen();

  objSelector.onChange(function (value) {
    var value = settings.modelOptions;
    if (value == "Heat Exchanger") {
      pathSelected = pathHe;
      console.log('Dropdown: HE', pathSelected);
    }
    else if (value == "Cat") {
      pathSelected = pathCat;
      console.log('Dropdown: Cat', pathSelected);
    }
    else if (value == "Gear Box") {
      pathSelected = pathGears;
      console.log('Dropdown: Cat', pathSelected);
    }
    else { ... }
  });
...
}

DEMO: https://mellowmonks.in/demos/9/

PW: MellowMonk@123