addListener not working on react-google-maps

Question

I have a problem: I'm using react-google-maps DirectionsRenderer like at this link: directionsrenderer

I'm showing directions and also markers but when finishing dragging route I want that also markers be changed, but it doesn't work.

In componendDidMount I inserted this:

google.maps.event.addListener(directionsRef, 'directions_changed', function() {
        console.log('changed from listener');
        markers = [];
      });

and I have this on rendering

props=> 


  <GoogleMap
     defaultZoom={3}
     defaultCenter={new google.maps.LatLng({lat:"45.1983838", lng:"12.0970988"})}
  >
     {props.directions && <DirectionsRenderer 
                            options={{draggable:true}}
                            directions={props.directions}
                            ref={(r) => directionsRef = r}
                            onDirectionsChanged={() => {
                                          console.log("changed from renderer");
                                        }}
                             />
    }
    {markers.map( (marker,i) => (
                              <Marker
                                key={i}
                                position={{ lat: marker.lat, lng: marker.lng }}
                            >
                              </Marker>
                          ))}


  </GoogleMap>