Trouble navigating to a different page after calling a function

I am using openrouteservice directions to calculate a route, i am able to return a route however when i try to navigate to another page after calculating this route, i get an error. I believe the error is because i am calling the Direction function to calculate the route. If i calculate the route in the onSubmit function i get no errors. I would preferably like to calculate the route in a different function but it always return this error when it tries to navigate to the maps page.

Error: {"line":116565,"column":31,"sourceURL":"http://IPADDRESS/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&minify=false"}

Code:

const onSubmit = async () => {...Direction(coordinates, distance);};const Direction = (coordinates, distance) => {    Directions.calculate({      coordinates: coordinates,      profile: "foot-walking",      instructions: false,      options: {        round_trip: {          length: distance,          points: 3,          seed: 1,        },      },      format: "geojson",    })      .then(function (json: any) {        let data = JSON.parse(JSON.stringify(json));        let GeojsonType = data.type;        let Coords = data.features[0].geometry.coordinates;        let GeometryType = data.features[0].geometry.type;        let FeaturesType = data.features[0].type;        navigation.navigate("MapPage", {          geojsonType: { GeojsonType },          coords: { Coords },          geometryType: { GeometryType },          featuresType: { FeaturesType },          currentLocation: { location },        });      })      .catch(function (error: string) {        console.log(JSON.stringify(error));      });  };