React-Native Google direction api not working

Question

I am developing a mobile application, my aim is to show the distance between two people on the map, I use the Google direction api for this, but there is a problem. The distance line between the two locations is not visible. I leave my map.js codes and warnings here.

Codes:

import React,{Component} from 'react';
import {View,Text} from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
export default class Map extends Component{
    state={
        region:{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }
    }
    componentWillMount(){
        console.log(this.props.data);
        const {yourLongLat}=this.props.data;
        this.setState({
               region:{
                latitude: yourLongLat[0],
                longitude: yourLongLat[1],
                latitudeDelta: 6,
                longitudeDelta: 6,
            }
 
        }
            
        )
    }
 render(){
    const {yourLongLat,herLongLat}=this.props.data;
    const origin = {latitude: yourLongLat[0], longitude: yourLongLat[1]};
    const destination = {latitude:herLongLat[0], longitude: herLongLat[1]};
    const GOOGLE_MAPS_APIKEY = 'don't show api keys';
     return(
         <View style={‌{flex:1, backgroundColor:'green'}}>
        <MapView
        style={‌{flex:1}}
        region={this.state.region}>
            <MapViewDirections
             origin={origin}
             destination={destination}
             apikey={GOOGLE_MAPS_APIKEY}
             strokeWidth={6}
             strokeColor="hotpink"
            />
        </MapView>
    
 
         </View>
     )
 }
}

İmages: enter image description here

enter image description here