I am trying to integrate google map with DirectionsService. I have drawn multiple routes on the maps. But i have to remove particular route from the map on the button click. How its possible? I tried the below code. I am using ReactJS

DirectionsRender.setMap(null).
but it clear all the routes.

Current code structure is
----------------------------
const [routes, setRoutes] = useState([]);
DirectionsService?.route(
            {
              origin: new google.maps.LatLng(item.source.lat, item.source.lng),
              destination: new google.maps.LatLng(item.destination.lat, item.destination.lng),
              travelMode: window.google.maps.TravelMode.DRIVING,
            },
            (result, status) => {
              if (status === window.google.maps.DirectionsStatus.OK) {
                setRoutes((prev: any) => [...prev, result]);
              } else {
                console.log("error", status);
              }
            },
          );

---------------------------------------
Component rendering like this.
return(
<>
      {isLoaded ? (
        <GoogleMap
          id="map"
          ref={mapRef}
          zoom={DEFAULT_ZOOM}
          center={getDefaultOrigin()}
          onLoad={(map) => setMap(map)}
          mapContainerStyle={{
            height: "600px",
            width: "100%",
          }}
        >
{routes.map((route: any, index: number) => (
            <DirectionsRenderer
              directions={route}
              key={index}
              options={{
                polylineOptions: {
                  strokeWeight: 5,
                  strokeColor: STROKE_COLOR,
                },
                preserveViewport: true,
                suppressMarkers: true,
              }}
            />
          ))}
</GoogleMap>): <></>}
)

Using latest version of react-google-maps/api. Is it possible to clear a specific route from the map?