Object is not transparent when selected as desired

Question

Hello guys!

Working on something to disassemble a complex model online, the thing is that to have better performance I had to change the model from a OBJ to a Draco-Compressed GLTF, it works fine, the only thing that seems to be broken is the transparency of the childs of the model when selected, when I had the OBJ instead of the GLTF, it was working fine and the childs when selected were transparent, but now with the GLTF it just gives this error and doesn't turn transparent:

Uncaught TypeError: Cannot read properties of undefined (reading 'material')

Here it's my code

    import * as THREE from '../build/three.module.js';
    import Stats from './jsm/libs/stats.module.js';
    import { OrbitControls } from './jsm/controls/OrbitControls.js';
    import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
    import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

    let camera, scene, renderer, stats;
    var raycaster, mouse = { x : 0, y : 0 };
    var objects = []; 
    var selectedObject;


    init();
    animate();

    function init() {

        const container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
        camera.position.set( - 1.8, 0.6, 2.7 );

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        raycaster = new THREE.Raycaster();


        const hemiLight = new THREE.HemisphereLight( 0xa0a0a0,  0xa0a0a0, 2);
        scene.add(hemiLight);


            // model
            
                    const loader = new GLTFLoader().setPath( 'models/fbx/com/' );
                    const dracoLoader = new DRACOLoader();
                    dracoLoader.setDecoderPath( './js/libs/draco/' );
                    loader.setDRACOLoader( dracoLoader );
                    loader.load( '_om2.gltf', function ( gltf ) {

                        gltf.scene.traverse( function ( child ) {

                    if ( child.isMesh ) {

                        child.castShadow = true;
                        child.receiveShadow = true;


                    }

                } );

                scene.add( gltf.scene );

            } );



            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio * 0.9 );
            renderer.shadowMap.enabled = true;
            renderer.physicallyCorrectLights = true;
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            renderer.toneMappingExposure = Math.pow(0.2, 0.2);  // -> exposure: 0.168


            const controls = new OrbitControls( camera, renderer.domElement );
            controls.target.set( 0, 0, - 0.2 );
            controls.update();

            window.addEventListener('resize', onWindowResize, false);
            renderer.domElement.addEventListener( 'click', raycast, false )

        }

                        // Raycast modified with capability of selecting childs

                        function raycast ( e ) {
            // Step 1: Detect light helper
            //1. sets the mouse position with a coordinate system where the center
            //   of the screen is the origin
            mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

            raycaster.setFromCamera( mouse, camera );
            var intersects = raycaster.intersectObjects( scene.children ,true );
            if ( intersects.length > 0 ) {
                selectedObject = intersects[0].object;
                var INTERSECTED = intersects[0];
                // Save actual color so we can restore it later
                selectedObject.material.transparent = true
                selectedObject.material.opacity = 0.5; 
                }

            else {
            selectedObject.material.transparent = false
            }

            //2. set the picking ray from the camera position and mouse coordinates
            raycaster.setFromCamera( mouse, camera );    


            //3. compute intersections (note the 2nd parameter)
            var intersects = raycaster.intersectObjects( scene.children, true );

            for ( var i = 0; i < intersects.length; i++ ) {
                console.log( intersects[ i ] ); 
    /*
        An intersection has the following properties :
            - object : intersected object (THREE.Mesh)
            - distance : distance from camera to intersection (number)
            - face : intersected face (THREE.Face3)
            - faceIndex : intersected face index (number)
            - point : intersection point (THREE.Vector3)
            - uv : intersection point in the object's UV coordinates (THREE.Vector2)
            */
        }

// Step 2: Detect normal objects //1. sets the mouse position with a coordinate system where the center // of the screen is the origin mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

//2. set the picking ray from the camera position and mouse coordinates
raycaster.setFromCamera( mouse, camera );    

//3. compute intersections (no 2nd parameter true anymore)
var intersects = raycaster.intersectObjects( scene.children );



for ( var i = 0; i < intersects.length; i++ ) {
    console.log( intersects[ i ] ); 
    /*
        An intersection has the following properties :
            - object : intersected object (THREE.Mesh)
            - distance : distance from camera to intersection (number)
            - face : intersected face (THREE.Face3)
            - faceIndex : intersected face index (number)
            - point : intersection point (THREE.Vector3)
            - uv : intersection point in the object's UV coordinates (THREE.Vector2)
            */
        }

    }

    document.getElementById("hide").addEventListener("click", function(){
        selectedObject.removeFromParent ( function (child) {
            if (child instanceof THREE.Mesh) {
                child.visible = false;
            }
        });
    });

    document.addEventListener("keydown", onDocumentKeyDown, false);

    function onDocumentKeyDown(event) {
        var keyCode = event.which;
        if (keyCode == 68) {
        selectedObject.removeFromParent ( function (child) {
            if (child instanceof THREE.Mesh) {
                child.visible = false;
            }
        });
    };