How to make direction lines like google map using react native map and react native maps directions?

Question

Images of maps, I'm building a react native app that includes react native google map and react native google maps directions packages to deliver items for several locations like a round. Trip. Currently i have managed to add direction lines in my code but I'm unable to get the same lines like in the Google maps in attached image, also the return line(light blue) will overlap with the original travel line(blue) sometimes when the map section of the app opens.

I need the direction lines exactly like the google maps anyway to obtain this? Below is my code

<MapView

        provider={PROVIDER_GOOGLE}

        showsUserLocation={true}

        followsUserLocation={true}

        ref={mapRef}

        style={styles.map}

        initialRegion={{

          ...state.locationData,

          latitudeDelta: LATITUDE_DELTA,

          longitudeDelta: LONGITUDE_DELTA,

        }}>

        {/* <RotatingMarker coordinate={state.locationData} /> */}

        {markers.map(marker => (

          <Marker

            tracksViewChanges={Platform.OS === 'ios' ? true : false}

            key={marker.id}

            coordinate={marker.coordinate}

            title={marker.title}

            description={marker.description}

            pinColor={

              marker.id === nearestLocation?.id ? '#0F53FF' : '#AECBFA'

            }>

            <LottieView

              source={require('../../assets/lottie/HomeLocationPin.json')}

              autoPlay

              loop

              style={styles.animation}

            />

          </Marker>

        ))}



      

        <MapViewDirections

          tappable={true}

          precision="high"

          resetOnChange={false}

          origin={markers[markers.length - 1].coordinate}

          destination={state.locationData}

          apikey={GOOGLE_MAPS_APIKEY}

          strokeWidth={5}

          strokeColor={'#AECBFA'}

          onReady={result => {}}

          onError={errorMessage => {

            console.error('Error return route:', errorMessage);

          }}

        />



        <MapViewDirections

          tappable={true}

          precision="high"

          resetOnChange={false}

          origin={state.locationData}

          destination={markers[markers.length - 1].coordinate}

          waypoints={markers

            .slice(0, markers.length - 1)

            .map(marker => marker.coordinate)}

          optimizeWaypoints={true}

          apikey={GOOGLE_MAPS_APIKEY}

          strokeWidth={7}

          strokeColor={'#0F53FF'}

          onReady={result => {}}

          onError={errorMessage => {

            console.error('Error going route:', errorMessage);

          }}

        />

      </MapView>