JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
     <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
     <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
     <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
     <script src="http://www.liedman.net/lrm-graphhopper/dist/lrm-graphhopper-1.2.0.js"></script>
</head>
<body>
   <div id="map"></div>
</body>
</html>

CSS

#map { height: 330px; }

JavaScript

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});
   
var map = L.map('map', {
    center: L.latLng(47.34126553291173, 8.78987789154053),
    zoom: 10,
    layers: [osm]
});

var baseMaps = {
    "OpenStreetMap": osm,
};

var layerControl = L.control.layers(baseMaps).addTo(map);


/*
// defualt OSMR Routing
L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
  ]
}).addTo(map);
*/

/*
// OSMR Routing
L.Routing.control({
	waypoints: [
		L.latLng(47.34126553291173, 8.78987789154053),
		L.latLng(47.35196615804476, 8.797141313552858)
	],
    router: L.Routing.osrmv1({
        serviceUrl: 'https://router.project-osrm.org/route/v1',
        profile: 'driving',
        useHints: true
    })
    // your other options go here
}).addTo(map);
*/


//	Graphhopper Routing
//	http://www.liedman.net/lrm-graphhopper/download/
//	https://docs.graphhopper.com/#section/Explore-our-APIs/API-Client-Libraries
var router = L.Routing.control({
  waypoints: [
  	L.latLng(47.34126553291173, 8.78987789154053),
		L.latLng(71.16677683299424, 25.780491828918457)
  ],
  show: true, /* show way description */
  routeWhileDragging: false,
  router: L.Routing.graphHopper("794117ce-7e37-4f73-a676-9d0f5b774ca8"),
});

//	https://stackoverflow.com/questions/38391132/graphopper-options-in-leaflet
router.getRouter().options.urlParameters.vehicle = 'bike'; /* car, foot and bike. */
router.addTo(map);

//	https://github.com/perliedman/lrm-graphhopper/tree/master
router.getRouter().on('response',function(e){
  console.log('This routing request consumed ' + e.credits + ' credit(s)');
  console.log('You have ' + e.remaining + ' left');
});