Cannot read properties of undefined (reading 'rotateOnAxis') error occurred

The cube.obj file and the cube.mtl file downloaded from three.js can be rotated well. By the way, the capsule.obj file and capsule.mtl file I made by Adobe Dimension are well loaded, but when I try to rotate it, the error appears as shown in the following snapshot. What did I do wrong and the file I made myself can't be rotated and an error appears?

error screenshot

cube.obj
cube.mtl
capsule.obj
capsule.mtl

app.js

import * as THREE from 'three';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

import styleCSS from '../styles/style.css';
import image from '../images/shutterstock_2184208287.jpg';
import capsuleObj from '../object/capsule.obj';
import capsuleMtl from '../object/capsule.mtl';

const RAD = .005;

let camera, scene, renderer, object;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
    camera.position.z = 2.5;

    // scene

    scene = new THREE.Scene();

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

    const pointLight = new THREE.PointLight(0xffffff, 15);
    camera.add(pointLight);
    scene.add(camera);

    // model

    const onProgress = function (xhr) {

        if (xhr.lengthComputable) {

            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');

        }

    };

    new MTLLoader()
        .setPath('.')
        .load(capsuleMtl, function (materials) {
            materials.preload();

            new OBJLoader()
                .setMaterials(materials)
                .setPath('.')
                .load(capsuleObj, function (obj) {
                    object = obj;
                    object.position.y = - 0.95;
                    object.scale.setScalar(.05);
                    scene.add(object);

                }, onProgress);

        });

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.useLegacyLights = false;
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.minDistance = 2;
    controls.maxDistance = 5;

    window.addEventListener('resize', onWindowResize);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    
    const axis = new THREE.Vector3(.5, .5, 0);
    object.rotateOnAxis(axis, RAD);

    renderer.render(scene, camera);
}

object is set only after the MTL file is loaded, which happens asynchronously. Therefore, you must check whether object is set:

if (object) {
    object.rotateOnAxis(axis, RAD);
}