I have centered an imported GLTF 3D Model around the axes:

However, when I rotate it using

scene.rotation.y += 0.01

It rotates around a completely different set of axes: See here for gif.

Here is my code (it is inside a react App.UseEffect):

const test = new SceneInit('myThreeJsCanvas');
test.initialize(); //seperate file for setting up camera and lighting etc
test.animate();

let loadedModel;
const glftLoader = new GLTFLoader();
glftLoader.load('./assets/planet/scene.gltf', (gltfScene) => {
   loadedModel = gltfScene;

   const center = new THREE.Vector3();
   center.z = -5
   gltfScene.scene.position.sub(center); //centering
   gltfScene.scene.scale.set(0.01, 0.01, 0.01);
   test.scene.add(gltfScene.scene);
});

const animate = () => {
  if (loadedModel) {
     //loadedModel.scene.rotation.x += 0.01;
     loadedModel.scene.rotation.y += 0.01;
     //loadedModel.scene.rotation.z += 0.01;
   }
   requestAnimationFrame(animate);
};
animate();

What am I doing wrong here? I have followed multiple other posts and methods, most including the now deprecated geometry all to no avail.