In my app, a user may want to run from point A to Point B, so we show them the route on a map.

The user plugs in their start location, it's sent to the server, and then spit out on the map on the following page (once they've started running.)

When trying to show them their route on the map, I keep getting the above warning for the info associated with the runner's destination.

The console logs it as:

object{

latitude: -1,

longitude: -1,

}

When I hard code coordinates into the function, the console logs the correct latitude and longitude, but it still does not spit it out on the map. Below is some of my code:

const [user_latitude, setUserLatitude] = useState(0)
const [user_longitude, setUserLongitude] = useState(0)
const [ startRun, setStartRun] = useState(null)
const [ endRun setEndRun ] = useState(null)

useFocusEffect(
    React.useCallback(()=?{
        let isActive = true;
        
        const fetchGeoPosition = () =>{ //gets runner's current position
            navigator.geolocation.getCurrentPosition(
            position=>{
                if(isActive){
            setUserLatitude(position.coords.latitude)
            setUserLongitude(position.coords.longitude)
    }
    
    ...

const finalLocation = async()=>{
    let running_response = await client_instance.get_final_locations

    setEndRun({ //this spits out -1,-1 when pulled from server
        latitude: client_response["location_info"]["end_lat"],
        longitude: client_response["location_info"][end_lon"],
    })
}
...
finalLocation()

setStartRun(
    {
        latitude: user_latitude,
        longitude: user_longitude
    },
)

...

<MapViewDirections
    origin={startRun}
    destination={endRun}
    strokeWidth={5}
/>

<Marker coordinate={startRun}/> //This will render their start pin
<Marker coordinate={endRun}/> //This renders -1,-1 when imported from server