Google DirectionsService returns no results in React

Question

I am trying to get a DirectionsRenderer to display a line between two markers in my React app.

when trying to use google DirectionsService function, currently, I receive the message: Directions request returned no results. as my result, when I execute my function. I can't quite figure out what is going wrong. Any help would be greatly appreciated.

My Directions State

const [directions, setDirections] = useState(null)

DirectionsRendererComponent

{directions ? <DirectionsRenderer directions={directions} /> : null}

handleGetDirections Function

  const google = window.google;
  const [origin, setOrigin] = useState(null)
  const [destination, setDestination] = useState(null)

  const handleGetDirections = () => {
    setOrigin({ lat: userLocation.lat, lng: userLocation.lat })
    setDestination({ lat: active.latitude, lng: active.longitude })

    if (active && userLocation) {
      const service = new google.maps.DirectionsService();
      service.route(
        {
          origin: origin,
          destination: destination,
          travelMode: google.maps.TravelMode.DRIVING
        },
        (result, status) => {
          if (status === 'OK' && result) {
            setDirections(result)
          }
        }
      )
    }
  }

handleGetDirections() is triggered onClick