Why does Google Maps always form to the most recent route set instead of using the bounds set using map.fitBounds()

I want Google Maps to display two routes within its bounds but instead it only ever fits the most recent route rendered. When I remove the render line renderer.setDirections(result); the bounds are set correctly. Why does this happen and how can I make it render the route and conform to the right bounds?

var map; // Declare map globally to access it in different functions
var directionsRenderer1, directionsRenderer2; // Renderers to display directions on the map for both routes
var directionsService1, directionsService2; // Services to request directions for both routes
var bounds; // Global bounds to encompass both routes

function initMap() {
    console.log("Initializing map...");
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10, // Initial zoom level of the map
        center: { lat: 40.8625, lng: -79.8857 }, // Center of the map
        streetViewControl: false, // Disable Street View control
        mapTypeId: 'roadmap' // Set map type to roadmap
    });

    bounds = new google.maps.LatLngBounds(); // Initialize bounds to include both routes

    directionsRenderer1 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#FF0000', // Color of the route line for the first renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsRenderer2 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#0000FF', // Color of the route line for the second renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsService1 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the first route
    directionsService2 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the second route
}

$(document).ready(function() {
    $('#leftRouteSelect').change(function() {
        // When the selected route in the left dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the left route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer1, directionsService1);
    });

    $('#rightRouteSelect').change(function() {
        // When the selected route in the right dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the right route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer2, directionsService2);
    });
});

function updateMapRoute(startLat, startLng, endLat, endLng, renderer, service) {
    var startPoint = new google.maps.LatLng(startLat, startLng); // Create a LatLng object for the start point
    var endPoint = new google.maps.LatLng(endLat, endLng); // Create a LatLng object for the end point

    var request = {
        origin: startPoint, // Set the origin of the route
        destination: endPoint, // Set the destination of the route
        travelMode: 'DRIVING' // Set travel mode to driving
    };

    service.route(request, function(result, status) {
        if (status === 'OK') {
            renderer.setDirections(result); // Render the directions on the map

            var routePath = result.routes[0].overview_path; // Get the path of the route

            // Extend bounds to cover this route
            routePath.forEach(function(pathPoint) {
                bounds.extend(pathPoint); // Add each point of the route to the bounds
            });

            // Fit the map to cover all the extended bounds (both routes)
            map.fitBounds(bounds);

            var leg = result.routes[0].legs[0]; // Get the leg of the route
            var infoWindow = new google.maps.InfoWindow({
                content: '<div style="color: black;">Distance: ' + leg.distance.text + ', Duration: ' + leg.duration.text + '</div>' // Content for the info window
            });

            infoWindow.setPosition(bounds.getCenter()); // Set the info window position to the center of the bounds
            infoWindow.open(map); // Open the info window on the map
        } else {
            window.alert('Directions request failed due to ' + status); // Alert on failure
        }
    });
}```


I tried using `bounds.extend(pathPoint);` and `map.fitBounds(bounds);` but the map would always conform to the most recent path set by `renderer.setDirections(result);`.