Fitbounds and directionService is not updating markers on the map

[ahmetkocabiyik]

When i click a marker to create direction route, markers are not updating properly. We are using react 18.2.0 but same codes are working like a charm on react 16.13.1. I don't understand what is the problem.

Screen.Recording.2023-12-25.at.18-58-29.mp4

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);

        }

    }

[The-Code-Monkey]

Im coming up with this same issue, it used to work, i know this because i am rebuilding a site.