react-google-maps/api polyline weird lines issue - reactjs

Question

i am trying to draw directions with a dynamic latitude and longitude array of objects coming from a realtime database, its working properly but there is a extra weird lines like the image below
what i want
if anyone can help thats will be great, thanks
here is my code snippets:
const [tripsState, setTripsState] = useState([]);
useEffect(() => {
const unsubscribe = onSnapshot(collection(db, "LiveTrips"), (snapshot) => {
setTripsState(
snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() }))
);
// setStopNames(
// snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() }))
// );
});
return () => {
unsubscribe();
};
}, []);
const handleDisplayMapById = (id) => {
setTripID(id);
tripsState.map((item) => {
if (id === item.id) {
setCurrentTrip(item);
setStops(item.data.Stops);
} else {
console.log("not working");
}
});
};
const getCurrentTripData = () => {
for (var key in currentTrip) {
if (currentTrip.hasOwnProperty(key)) {
SiteLocation = currentTrip[key].SiteLocation;
}
}
};
getCurrentTripData();
const handlePolylineDraw = () => {
var PathLatLong = [];
var polylinePath = [];
if (tripID > 0) {
PathLatLong.length = 0;
polylinePath.length = 0;
PathLatLong = currentTrip.data.Polyline.map((line) => {
return decode(line);
});
// console.log(PathLatLong);
for (let x of PathLatLong) {
x.map((i) => {
polylinePath.push({ lat: i[0], lng: i[1] });
});
}
}
return { polylinePath };
};
<Polyline
path={handlePolylineDraw().polylinePath}
options={{
strokeColor: "#42A9E7",
strokeOpacity: 1,
strokeWeight: 3,
fillOpacity: 0,
clickable: false,
draggable: true,
editable: false,
visible: true,
radius: 30000,
path: handlePolylineDraw().polylinePath,
zIndex: 1,
}}
/>