Direction waypoints are not following streets properly

Question

I am using Mapbox 11 (React Native) and mapbox-gl (React) and would like to display routes for walking, driving and cycling.

However, whethere it is driving or walking, the resulting route from the directions API is pretty imprecise as can be seen in the screenshots below.

The overall directions are correct, but it seems the resolution of the resulting waypoints is not high enough in order to bend and follow the streets properly.

How can I improve this result?

Screenshots

Code

export const Directions = ({ coords }: { coords: Coordinates[] }) => {
  const [route, setRoute] = useState<Direction>();
  useEffect(() => {
    fetchRoute(coords).then(setRoute);
  }, [coords]);

  if (!route) {
    return <></>;
  }

  return <Route directions={route} />;
};

<MapView>
   <Camera bounds={bounds} zoomLevel={5} />
   <Directions coords={coords} />
</MapView>

type RouteType = 'driving' | 'walking' | 'cycling';


export const fetchRoute = async (
  waypoints: Coordinates[],
  type: RouteType = 'walking',
): Promise<Direction> => {
  const waypointUrlParam = waypoints.map((wp) => `${wp.lng},${wp.lat}`).join(';');
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(
      'GET',
      `https://api.mapbox.com/directions/v5/mapbox/${type}/${waypointUrlParam}?steps=true&geometries=geojson&access_token=${ACCESS_TOKEN}`,
    );
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.responseText);
      }
    };
    xhr.send();
  });
};