How do I get a linear gradient in strokeColor props

[musabgulfam]

I am trying to create a linear gradient on the stroke of maps. Currently this is my attempt by far, which failed too.

<MapViewDirections
    mode={'DRIVING'}
    origin={coordinates[0]}
    destination={coordinates[1]}
    apikey={API_KEY}
    strokeWidth={10}
    strokeColor={_ => 
        <LinearGradient
            colors={['#8F55F7', '#587CF5']}
            style={{width: '100%', height: '100%'}}
        />
    }
    timePrecision={"now"}
    onReady={data => {
        console.log('ONREADY DATA: ', data);
        setDuration(data.duration);
        setDistance(data.distance * 0.621371);
        setCarAngle(calculateAngle(data.coordinates));
        getTripStatus(tripInfo.ID, username, password)
    }}
/>

This is the result I am looking for is

[Alpacora]

if you manage to do this, please let me now. 🙏🏻

[atdhetwig]

strokeColors={['#8F55F7', '#587CF5']}