Event listener "mouseMove"

Questions
1

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.