我试图用谷歌API和@react-google-api库做一个简单的路由，我成功地显示了2点之间的路线，但当我试图删除路线时，路线无法删除，下面是我的代码：

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

这是我清理路线的密码

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

这是我绘制路线的代码：

<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是来自useState [direction，setDirection]的状态
截图：当路由显示x1c 0d1x时
当我尝试删除路由

时
它只是减少了路线不透明性