i'm using THREE.js to load a .gltf mesh into my scene.

when i load the mesh, i set a variable's value to scene.gltf in the loading sequence.

loader.load(
'donut.gltf',
function ( gltf ) {
    donut = gltf.scene;
    scene.add( gltf.scene );
},

this works, and i'm able to reference that variable to rotate my mesh.

function animation(time) { 
    donut.rotation.x = time / 2000;
    donut.rotation.y = time / 1000;
    renderer.render(scene, camera);
}

however, when i try to use three.interact to detect a mouseover event,

donut.on('mousemove', function(ev) {
        console.log(ev);
    });

i get the error:

gltf.html:87 Uncaught TypeError: Cannot read properties of undefined (reading 'on')

if i declare donut as a THREE.Mesh before i assign the mesh to it, the error goes away, and so does the functionality of the mouseover function. if i change my donut variable to scene instead, i get basically my intended output, but if there is anything else in the scene, it triggers the event as well.

how do i reference only my intended mesh, and call the mouseover function with three.interact?