Mapbox Directions – How do you use a clicked point as the ‘end’ and a geocoding result as the ‘start’ in a Mapbox Directions API HTTP request?

This is my first question here on stack overflow. I’m working on a function using the Mapbox Directions API. I used this Mapbox Directions API tutorial as a base, but since I want both my start and end point to change, I am running into problems. I want the user to be able to click a rendered point layer and then enter an address into the Mapbox Geocoder to retrieve a route between those two locations. The following code allows this to happen on the first click. The issue occurs in subsequent clicks. When I enter a location into the geocoder, separate requests are made for every single time the layer was clicked since the map had loaded. I know this must have something to do with the entirety of the code (ie. click layer, create function for HTTP request, get coordinates of geocoder result) being contained within the ‘click’ event, but I’m not sure how to reach my goal otherwise.

     map.on('click', function(e) {
      var bbox = [
        [e.point.x - 5, e.point.y - 5],
            [e.point.x + 5, e.point.y + 5]
            ];
      var features = map.queryRenderedFeatures(bbox, {
        layers: ['Schools']
            });
      
      //these coordinates will be used as the 'start' coordinates in the request
      let start = features[0].geometry.coordinates.slice(-2)
    

      // create a function to make a directions request
      async function getRoute(end) {
        
        
        const query = await fetch(
          `https://api.mapbox.com/directions/v5/mapbox/walking/${start};${end}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`,
          { method: 'GET' }
        );
        const json = await query.json();
        const data = json.routes[0];
        const route = data.geometry.coordinates;
        const geojson = {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: route
          }
        };
      
        // if the route already exists on the map, we'll reset it using setData
        if (map.getSource('route')) {
          map.getSource('route').setData(geojson);
        }
        // otherwise, we'll make a new request
        else {
          map.addLayer({
            id: 'route',
            type: 'line',
            source: {
              type: 'geojson',
              data: geojson
            },
            layout: {
              'line-join': 'round',
              'line-cap': 'round'
            },
            paint: {
              'line-color': 'orange',
              'line-width': 5,
              'line-opacity': 1
            }
          },
          UnderRoadLabels
          );
        }                
      }
            
        //the coordinates of the geocoder result will be used as 'end' in the request.
        //call function getRoute(end)
        geocoder.on('result', function(e) {
          var end = e.result.center.slice();              
          getRoute(end);                
          map.setLayoutProperty('route', 'visibility', 'visible');
        });
    });
    };

My guess is that since everything is contained within a ‘click’ function, every click is being used to make an HTTP request. I want only the last click to be used to make one request.

I am a noob here and am completely stumped. I’ve tried a lot of different things. Any advice? How could I re-write this so that it isn’t entirely contained in one click function?

Any help is appreciated.