Event listener "mouseMove"

I’m trying to get an eventlistener MouseMove to work. At the moment the event is responding to mousemoves but not how it should. Since I’m very new to all this I made mistakes in the code, I just have no idea what I did wrong exactly so hopefully someone here can point me in the right direction.

Here is the effect that I would like to achieve: three.js examples

And here is how I set it up:

//Variables for setup

let container, stats;
    
let camera, renderer, scene, bottle;

let mouseX = 0, mouseY = 0;

let targetX = 0, targetY = 0;

let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
  container = document.querySelector("#bottle");

  //Create scene
  scene = new THREE.Scene();

  const fov = 60
  const aspect = container.clientWidth / container.clientHeight;
  const near = 0.01;
  const far = 500;

  //Camera setup
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, -0.2, 2);
   
   const ambient = new THREE.AmbientLight(0x404040, 100);
  scene.add(ambient);
  
  const lightpoint1 = new THREE.PointLight(0xc4c4c4,10);
   lightpoint1.position.set(0,300,500);
        scene.add(lightpoint1);
  
  const lightpoint2 = new THREE.PointLight(0xc4c4c4,10);
   lightpoint2.position.set(500,100,0);
        scene.add(lightpoint2);
  
  const lightpoint3 = new THREE.PointLight(0xc4c4c4,10);
   lightpoint3.position.set(0,100,-500);
        scene.add(lightpoint3);
  
  const lightpoint4 = new THREE.PointLight(0xc4c4c4,10);
   lightpoint4.position.set(-500,300,500);
        scene.add(lightpoint4);

  const light = new THREE.DirectionalLight(0xffffff, 5);
  light.position.set(0, 1, 0);
  light.castShadow = true;
  scene.add(light);
  
  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  container.appendChild(renderer.domElement);
  
   stats = new Stats();
				//container.appendChild( stats.dom );

				document.addEventListener( 'mousemove', onDocumentMouseMove );

  //Load Model
  let loader = new THREE.GLTFLoader();
  loader.load("https://mywebsite/wp-content/uploads/2021/04/1FinalBrain-1.glb", function(gltf) {
    scene.add(gltf.scene);
    bottle = gltf.scene.children[0];
    gltf.scene.scale.set(3.5, 3.5, 3.5);
    animate();    
  });
}

function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );
}

function animate() {
  requestAnimationFrame(animate);
  render();
 stats.update();
}

function render(){
  
  camera.position.x += ( mouseX - camera.position.x )*0.05;
  camera.position.y += ( - mouseY - camera.position.y )*0.05;
  
  camera.lookAt( scene.position );
  
  renderer.render( scene, camera );
}
init();

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.clientWidth, container.clientHeight);
}  
 	window.addEventListener("resize", onWindowResize);

What is happening, the model loads normally but as soon as the mouse is moved the model moves over the Z axis to the background where it kinda unpredictable wiggles around. I already tried many thing but without success.
Hopefully someone can point me in the right direction.
Thanks in advance.