How to stop arrows from scaling with zoom in and zoom out.

I am trying to render arrows using the PolylineArrowMaterialProperty, but the arrow head keep scaling with the distance from camera? I want arrows to be of constant size.

function renderArrow(location, angle, length, height, color) {
    let earthRadius = 6400000; //should ideally be crs84 globe based calculation but for small arrow size the difference and inaccuracy is miniscule.
    let dy = (length * Math.cos(angle * Math.PI / 180) / earthRadius) * (180 / Math.PI);
    let dx = (length * Math.sin(angle * Math.PI / 180) / earthRadius) * (180 / Math.PI);

    let centerLocation = 0.5;
    let startLat = - (1 - centerLocation) * dx;
    let startLong = location.long - (1 - centerLocation) * dy;
    let endLat = + centerLocation * dx;
    let endLong = location.long + centerLocation * dy;

    let arrow = viewer.entities.add({
        name: 'arrow',
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([startLong, startLat, height,
                endLong, endLat, height
            width: 10,
            followSurface: true,
            material: new Cesium.PolylineArrowMaterialProperty(color)
    return arrow;

The PolylineArrowMaterial creates the arrow in screen space which is why it scales up and down like that. If it was a constant size big enough to be seen from space it would be massive when viewed from the Earth.

This is the source for the arrow material:

I played around a bit with it to see if I could get a constant size but I don’t see an easy way to do it. Another problem is if the arrow head is a constant size, wouldn’t the line also need to be a constant size? Otherwise it would look disconnected. You might have to write a custom material, or try another approach like forgoing PolylineArrowMaterial entirely and creating a polygon to represent the arrow head for example.