How do I prevent the Three.js OBJLoader from merging all the parts of my obj into 1 mesh?

Question

Allright, I've been stuck on this issue for a while now so here I am.

I have an .obj file, created by one of my colleagues, that I need to load into a three.js scene. I need to be able to change the materials and texture of individual parts of said object. Only when I try loading this .obj in three.js and log the object I loaded in, I noticed it gets merged into 1 mesh.

I've been looking around for an answer to this problem, but I haven't even found someone with the same problem as me. I am currently loading the .obj and it's .mtl like this:

loadMTL = (mtlLoader, mtlPath, texPath, loader, objPath) => {
    mtlLoader.load(
      mtlPath,
      mat => {
        mat.preload();

        loader.setMaterials(mat);
        loader.load(
          objPath,
          object => {
            console.log(object);

            this.scene.add(object);

          },
          // called when loading is in progresses
          function(xhr) {
            // console.log("Obj - " + (xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          // called when loading has errors
          function(error) {
            console.log("An error happened loading an OBJ");
            console.log(error);
          }
        );
      },
      // called when loading is in progresses
      function(xhr) {
        // console.log("Mat - " + (xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      // called when loading has errors
      function(error) {
        console.log("An error happened loading a MTL");
        console.log(error);
      }
    );
  };

The OBJLoader I'm using is the Three.js OBJLoader, not the OBJLoader2. The resulting log output is as follows:

Group {uuid: "DCA4C797-A66E-4007-ADAF-C4060FD9D886", name: "", type: "Group", parent: null, children: Array(1), …}
        castShadow: false
        children: Array(1)
               0: Mesh {uuid: "76EA3F31-CB49-4D5F-A95C-B45A751DFBBE", name: "Kamer", type: "Mesh", parent: Group, children: Array(0), …}
            length: 1
            __proto__: Array(0)
        frustumCulled: true
        layers: Layers {mask: 1}
        materialLibraries: ["Kastje1_test.mtl"]
        matrix: Matrix4 {elements: Array(16)}
        matrixAutoUpdate: true
        matrixWorld: Matrix4 {elements: Array(16)}
        matrixWorldNeedsUpdate: false
        name: ""
        parent: null
        position: Vector3 {x: 20, y: 0, z: 0}
        quaternion: Quaternion {_x: -0.7071067811865475, _y: 0, _z: 0, _w: 0.7071067811865476, _onChangeCallback: ƒ}
        receiveShadow: false
        renderOrder: 0
        rotation: Euler {_x: -1.5707963267948966, _y: 0, _z: 0, _order: "XYZ", _onChangeCallback: ƒ}
        scale: Vector3 {x: 33, y: 70, z: 55}
        type: "Group"
        up: Vector3 {x: 0, y: 1, z: 0}
        userData: {}
        uuid: "DCA4C797-A66E-4007-ADAF-C4060FD9D886"
        visible: true
        eulerOrder: (...)
        id: 20
        modelViewMatrix: Matrix4 {elements: Array(16)}
        normalMatrix: Matrix3 {elements: Array(9)}
        useQuaternion: (...)
        __proto__: Object3D

As you can see, the Group has only 1 child Mesh. That mesh itself has no further children. The problem is that I need to retexture certain parts of the object, seeing as it only has 1 mesh and said mesh can only have 1 texture, as far as I know, I don't know how to proceed. Is there some Three.js fundamental concept I'm missing?

EDIT:

After some more searching we figured out what went wrong: apparently my colleague only defined one group in the .obj file. We fixed the .obj file and now I do get different meshes.