threejs orbital control issue

I am a newbie to threejs, I want the orbit control to rotate on a point instead of rotating around an object, it works with camera position z set to 0.01 however when I add height to the camera it tries to rotate around the scene instead of being center, gifs included below, code:

const init = () => {
    scene = new THREE.Scene();
    scene.background = new THREE.Color("whiteSmoke");

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;


    
    
    
    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.lookAt(new THREE.Vector3(0, player.height, 0));
    // camera.position.y = 2;
    camera.position.z = 0.01;

    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = false;
    controls.rotateSpeed = - 0.30;
    controls.enablePan = false;
    scene.add(camera);




    // axe helper
    const axesHelper = new AxesHelper(20);
    scene.add(axesHelper);

    loadModels(scene)

 
    animate();
};

const animate = () => {
    // this loops to create frames
    requestAnimationFrame(animate);
    // update controls every frame  for first person
    // controls.update(0.3)

    renderer.render(scene, camera);
};

const onWindowResize = () => {
    // for first person controls handle window resize
    controls.handleResize();
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
init();

what I have when camera height is not set => gif here

vs when i add camera.postion.y = 2 => another gif here