Cannot clear route from DirectionRenderer ReactJS with @react-google-maps.api

Question

I'm trying to make a simple routing with google API and @react-google-api library, I success to show route between 2 points, but when I try to remove the route, the route cannot be removed, here's my code :

const calculateRoute = async () => {
    let placeServices = new google.maps.places.PlacesService(map);
    const result = await directionService.route({
      origin: {lat: -6.914864,lng: 107.608238},
      destination: {lat: -6.814864,lng: 107.608238},
      travelMode: google.maps.TravelMode.DRIVING,
    });
    setDirection(result);
  }

and this my code to clear the route :

const clearRoute = async () => {
    setDirection(null)
  }

and this is my code to rendering a route :

 <GoogleMap
        mapContainerStyle={{
              height: '100vh',
              width: '60vw',
            }}
            zoom={14}
            center={center}
            onLoad={(map) => onLoad(map)}
          >
            {placeData.map((item, index) => (
              <MarkerF
                key={index}
                position={{
                  lat: item.geometry.location.lat(),
                  lng: item.geometry.location.lng(),
                }}
              />
            ))}
            {
              direction &&
                <DirectionsRenderer directions={direction}/>
            }
          </GoogleMap>

direction is a state from a useState [direction, setDirection]

Screenshot: When route is show

When I trying to remove route

it's only reduce opacity from route

Answer 1

React development mode renders twice by default. To solve this, you can remove React StrictMode in the index.js file or npm build the project as follows

npm install -g serve
serve -s build