title: How to use google maps DirectionRenderer in React over and over when clicking on different Marker
body: <p>I have a piece of <strong>state</strong> holding directions like so:</p>
  <pre><code>  const [directions, setDirections] = useState({
      response: null,
      travelMode: 'DRIVING',
      origin: '',
      destination: ''
    })
  </code></pre>
  <p>I have a google map with several markers rendered. On marker click the <strong>destination</strong> is set to the marker address of, and the <strong>origin</strong> stays the same. (set to the users current address)</p>
  <p>My end goal is to show the GoogleMaps DirectionRenderer from the user location to the selected marker. Then if the user is to click another marker have it show the path to the new marker and so on.</p>
  <p>The code is essentially straight from the google docs:</p>
  <pre><code>            {directions.destination !== '' &amp;&amp; directions.origin !== '' ? (
                &lt;DirectionsService
                  options={{
                    destination: directions.destination,
                    origin: directions.origin,
                    travelMode: directions.travelMode
                  }}
                  callback={directionsCallback}
                /&gt;
              ) : (
                null
              )}
  
              {directions.response !== null ? (
                &lt;DirectionsRenderer
                  options={{
                    directions: directions.response
                  }}
                /&gt;
              ) : null}
  
  </code></pre>
  <pre><code>  const directionsCallback = (response) =&gt; {
      console.log(response)
  
      if (response !== null) {
        if (response.status === 'OK') {
          setDirections(
            () =&gt; ({
              response
            })
          )
        } else {
          console.log('response: ', response)
        }
      }
    }
  </code></pre>
  <p>In their documentation, they override the whole piece of state and set it equal to the response, whereas I still need to preserve my values assuming they change and I need the response and functions to re-fire.</p>
  <p>When I tried to spread through the directions object to preserve the values:</p>
  <pre><code>    if (response !== null) {
        if (response.status === 'OK') {
          setDirections(
            () =&gt; ({
              directions...
              response: response
            })
          )
        } else {
          console.log('response: ', response)
        }
      }
    }
  </code></pre>
  <p>The API was hit over and over and eventually hit a limit. As well as was not working well at all (glitching and jittering). Any solutions?</p>