Fitbounds and directionService is not updating markers on the map #1206

function onMarkerClick(lat, lng, markerId){
        setActiveMarkerId(markerId);
        setPath(null);
        if(route) route.setMap(null);

        if(map && maps) {

            const directionsService = new maps.DirectionsService();
            const directionsDisplay = new maps.DirectionsRenderer();
            directionsService.route({
                origin: new maps.LatLng(projectLocation.lat, projectLocation.lng),
                destination: new maps.LatLng(lat, lng),
                travelMode: 'DRIVING'
            }, (response, status) => {
                if (status === 'OK') {

                    directionsDisplay.setDirections(response);
                    setRoute(new maps.Polyline({
                        path: [],
                        geodesic : true,
                        strokeColor: getComputedStyle(document.documentElement).getPropertyValue('--map-route-color').trim(),
                        strokeOpacity: 1.0,
                        strokeWeight: 5,
                        editable: false,
                        map: map
                    }));
                    setPath(response.routes[0].overview_path);

                    setDistance(parseFloat((response.routes[0].legs[0].distance.value/1000)).toFixed(1))
                    setDuration(parseInt((response.routes[0].legs[0].duration.value/60)).toFixed(0))

                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

            var bounds = new maps.LatLngBounds();
            bounds.extend(new maps.LatLng(projectLocation.lat, projectLocation.lng));
            bounds.extend(new maps.LatLng(lat, lng));

            let padding = window.innerWidth * 0.1;
            map.fitBounds(bounds,padding);

        }

    }