How can I change the color and stroke width of a given route?

I have just a thin blue line as the route polyline and it is quite different not to think that this ist just a small river? Does anyone have an idea how to change the color and the strike width (line width) of the polyline (between Essen and Dortmund). The solution by Gemini and ChatGPT is not working...

Thanks for your help, Markus

<script src='https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js'
 crossorigin async data-callback='initMapKit' data-libraries='full-map,services,overlays,annotations' data-token='TOKEN></script>	

<script type='module'>
 const setupMapKitJs = async() => {
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {await new Promise(resolve => { window.initMapKit = resolve }); delete window.initMapKit;}};

const main = async() => {
await setupMapKitJs();
    
var map = new mapkit.Map('map-container', { 
  center: new mapkit.Coordinate(51.5, 6.9), 
  showsZoomControl: true,
  colorScheme: 'light',
  showsMapTypeControl: true,
});

map.cameraDistance = 30000;
        

![]("https://developer.apple.com/forums/content/attachment/8e8433c5-9f43-4ddc-80e5-43d15f215c3f" "title=Bildschirmfoto 2025-08-12 um 13.38.06.png;width=590;height=281")
const directions = new mapkit.Directions();

directions.route({
  origin: 'Essen',
  destination: 'Dortmund'
}, (error, response) => {
  if (error) {
    console.error(error);
    return;
  }
  
  const route = response.routes[0];

  const routePolyline = route.polyline;
  routePolyline.lineWidth = 20;

  map.addOverlay(routePolyline);
});
};
main();
</script>