Polyline in react native

Question

I am newbie to react native, and I have this problem in polyline in react native. Im using android only. In our realtime database, we have ADMIN Collection , the datas are information about admin and its store. So store have latlong properties.

so I store the admin information to state variable

const [storeInformation, setstoreInformation] = useState([]);

and I render it like this

  {storeInformation.map((item) => (
            <Marker
              key={item.id}
              coordinate={{
                latitude: item.RefillingStation.addLattitude ?? null,
                longitude: item.RefillingStation.addLongitude ?? null,
              }}
              description="Test1"
              pinColor={"#87cefa"}
              onPress={() => handleStoreMarkerPress(item, location)}
              title={item.RefillingStation.stationName}
              calloutVisible={true}
              callout={{
                tooltip: true,
                stopPropagation: true,
              }}
              zIndex={1}
              showCallout={true}
            >
              <Callout
                tooltip={true}
                onPress={() => {
                  console.log("passing from mapscreen", item);
                  navigation.navigate("toMapsProductScreen", { item });
                }}
              >
                <View style={styles.callout}>
                  <Text style={styles.calloutText}>
                    {item.RefillingStation.stationName}
                  </Text>
                </View>
              </Callout>

              {/* <MaterialCommunityIcons name="storefront" size={24} color="black" /> */}
            </Marker>
          ))}

I get my current location like this

  useEffect(() => {
    let interval;
    let isMounted = true;
    const getLocation = async () => {
      let { status } = await Location.requestBackgroundPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      if (isMounted) {
        console.log("line 116", location);
        setLocation(location);
      }
    };
    getLocation();
    interval = setInterval(async () => {
      let location = await Location.getCurrentPositionAsync({});
      if (
        isMounted &&
        JSON.stringify(location.coords) !== JSON.stringify(prevLocation?.coords)
      ) {
        console.log(
          "Line 128----->Latitude:",
          location.coords.latitude,
          "Longitude:",
          location.coords.longitude
        );
      }
      setPrevLocation(location);
    }, 3000);
    return () => {
      isMounted = false;
      clearInterval(interval);
    };
  }, [prevLocation]);
 const [location, setLocation] = useState();
  const [prevLocation, setPrevLocation] = useState(null);

as you can see I include onpress in the marker of the storeInformation, so this is the code

 const handleStoreMarkerPress = (item, location) => {
    console.log("line 147", location);
    //addLongitude
    const polylineCoordinates = [
      {
        latitude: location?.coords.latitude || 0,
        longitude: location?.coords.longitude || 0,
      },
      {
        latitude: item?.RefillingStation.addLattitude || 0,
        longitude: item?.RefillingStation.addLongitude || 0,
      },
    ];
    if (location && location.coords) {
      polylineCoordinates.push({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
    }
    setpolylineCoordsStoreToCustomer(polylineCoordinates);
    setSelectedStore(item);

  
  };

and I render it like this

  {polylineCoordsStoreToCustomer &&
            polylineCoordsStoreToCustomer.length >= 2 && (
              <MapViewDirections
                origin={polylineCoordsStoreToCustomer[0]}
                destination={
                  polylineCoordsStoreToCustomer[
                    1
                  ]
                }
             
                waypoints={polylineCoordsStoreToCustomer.slice(
                  1,
                  polylineCoordsStoreToCustomer.length - 1
                )}
                strokeWidth={3}
                strokeColor="red"
                apikey={GOOGLE_API_KEY}
              />
            )}

My problem right now is like this

and my expected behavior is

Then also if I move to any place or I will go to the store, my current location will update as well as the route.