Three.js Materials disappear after loading second Object

Question

I'm using Three.js with the OBJLoader and the MTLLoader and everything is working fine while I only have one object in the scene, but as soon as I add a second one parts of the material on the first one just become white.

I have uploaded the .obj and .mtl files here: https://drive.google.com/drive/folders/1_nHGr9EzrdOMCwBSYwAluRW1fYh8R8g_?usp=sharing

My Javascript code:

const scene = new THREE.Scene();
        const light = new THREE.AmbientLight(0xffffff);
        scene.add(light);

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xddffdd, 1);
        document.body.appendChild(renderer.domElement);

        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 7;
        controls.target.set(1, 1, 1);

        const objLoader = new THREE.OBJLoader();
        const mtlLoader = new THREE.MTLLoader();

        function loadObject(fileName, x, y, z) {
            mtlLoader.load("blender-files/" + fileName + ".mtl", (materials) => {
                materials.preload();
                objLoader.setMaterials(materials);
                objLoader.load("blender-files/" + fileName + ".obj", (object) => {
                    object.scale.set(40, 40, 40);
                    object.position.set(x, y, z);
                    scene.add(object);
                })
            })
        }

        //this becomes white when the second object is loaded
        loadObject("CornerBOW", 0, 0, 2);
        loadObject("CornerGRY", 2, 2, 0);
        render();

        function render() {
            controls.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }