How to clean the line that draws the route when using Directions

[argudev]

I am making a system with this library, I am using the Directions module as shown in the example, now, the example only shows the route of 2 points, for my part making a couple of changes I make it draw the route of several points but I have a problem.

I make a query to my DB to obtain the records of the locations, now, with that list I draw the route using Directions, the library makes it very well and simple but when I try to draw another route on the map I get the route that I had already drawn, I investigated and implemented several methods to eliminate the route but I was not successful and neither when making the manual route with polylines.

Is it that the map saves a cache and I am not realizing it, or how do I deactivate it?

An example of how it looks on the map, I separated the route lines by colors.

I am using react and this is how I have my directions component managed.

import React, { useState, useEffect, Fragment } from 'react';
import {
    useMapsLibrary,
    useMap
} from '@vis.gl/react-google-maps';

const Direction = ({ waypoints, setaddresslist }) => {
    const map = useMap();
    const routesLibrary = useMapsLibrary('routes');
    const [directionsService, setDirectionsService] = useState();
    const [directionsRenderer, setDirectionsRenderer] = useState([]);
    const [directionsRenderers, setDirectionsRenderers] = useState([]);
    const [routes, setRoutes] = useState([]);
    const [routeIndex, setRouteIndex] = useState(0);
    const selected = routes[routeIndex];
    const leg = selected?.legs[0];

    const calculateRoute = async (waypoints) => {
        if (!directionsService) return;
        let getrngcolor = getRandomColor();
        let routes = [];
        const promises = [];
        
        clearAllRoutes();

        const calc = async (origin, destination) => {
            return new Promise((resolve) => {
                directionsService.route({
                    origin: origin,
                    destination: destination,
                    travelMode: 'WALKING',
                    optimizeWaypoints: false,
                }).then((response) => {
                    if (response.status === 'OK') {
                        routes.push(response);
                    } else {
                        console.error(`Error: ${response.status}`);
                    }
                    resolve();
                });
            });
        };
        for (let i = 0; i < waypoints.length - 1; i++) {
            const origin = waypoints[i].location;
            const destination = waypoints[i + 1].location;
            promises.push(calc(origin, destination));
        }

        await Promise.all(promises);

        
        routes.forEach((route) => {
            const renderer = new google.maps.DirectionsRenderer({
                map: map,
                markerOptions: { visible: false },
                preserveViewport: true,
                polylineOptions: {
                    strokeColor: getrngcolor,
                    strokeWeight: 5,
                },
            });
            renderer.setDirections(route);
            directionsRenderers.push(renderer);
        });

        return () => {
            directionsRenderers.forEach(renderer => renderer.setMap(null));
        };
    };
    
    const clearAllRoutes = () => {
        
        directionsRenderers.forEach((renderer) => {
        renderer.setDirections({ routes: [] });
            renderer.setMap(null);
        });
        setDirectionsRenderers([]);
    };
    
    const getRandomColor = () => {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    };

    useEffect(() => {
        if (!routesLibrary || !map) return;
        setDirectionsService(new routesLibrary.DirectionsService());
        setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map }));
    }, [routesLibrary, map]);

    // Use directions service
    useEffect(() => {
        if (!directionsService || !directionsRenderer) return;
        calculateRoute(waypoints);
    }, [directionsService, directionsRenderer]);

    if (!leg) return null;

    return (<></>);
}

export default Direction