Move selected country SVG map to left center side of screen with zoom

Question

I have this SVG map created and trying to move it using svgpanzoom library. I want to move it towards the extreme left middle side and zoom it. So the country is zoomed in and shown on the middle left side. I have tried to play with panZoomInstance. panBy function using the bounding box and viewport. But I am unable to get it to work for all resolutions. Please guide me to where I am making a mistake in the code. Attached is the js fiddle. https://jsfiddle.net/alternateFaraz/ygqhua7n/

    function zoomToCountry(country) {
    const svgPanZoomInstance = panZoomInstance;
    svgPanZoomInstance.reset();
   
    var bbox = country.getBBox();

    
    PrintValues(bbox, svgPanZoomInstance);
    svgPanZoomInstance.zoom(1.6);
    window.setTimeout(function(){
    var bbox = country.getBBox();
    PrintValues(bbox, svgPanZoomInstance);
    var zoomLevel = Math.min(svgPanZoomInstance.getSizes().width / bbox.width, svgPanZoomInstance.getSizes().height / bbox.height);

    // Calculate the x and y coordinates for centering the country element in the viewport
    var xCenter = bbox.x + (bbox.width / 2);
    var yCenter = bbox.y + (bbox.height / 2);
    
    // Pan the viewport to center the country element and move to the left side of the pane
    //svgPanZoomInstance.pan({ x: 0 - xCenter + (svgPanZoomInstance.getSizes().width / 4), y: svgPanZoomInstance.getSizes().height / 2 - yCenter });
    
    
    const viewportWidth = svgPanZoomInstance.getSizes().width;
    const viewportHeight = svgPanZoomInstance.getSizes().height;

    // Calculate the new x and y values for the SVG Pan Zoom instance
    var newX = -bbox.x - bbox.width / 2;
    var newY = (viewportHeight / 2) - bbox.y - bbox.height / 2;


    customPanBy({x:  newX, y: newY})

},1);