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

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