How to add objects into array on specific position with setWayPoints() instead of wayPoints.splice? (useRecoilState)

Question

I currently have a recoil global State Array with Objects (Default: Start and Destination) and i want to add Waypoints in between of them. On pressing a green plus button, new Waypoints appear between Start and Destination:

My problem is, that it doesnt appear instantly on clicking on the "add" button, but only if i trigger any other useState. Probably because i am not adding the waypoints into the array with: "setWayPoints()" but with "wayPoints.splice". Is there any way to add them into the array with "setWayPoints()"?

The code for adding Waypoints into the global State Array:

<MaterialCommunityIcons
      selectable={selectable}
      style={styles.addIcon}
      name="plus-circle"
      size={30}
      color={"green"}
      onPress={() => {
        wayPoints.splice(key + 1, 0, {
            coordinates: { longitude: 0, latitude: 0 },
            place: "",
            placeholder:
              key === wayPoints.length - 1
                ? "Destination"
                : "Waypoint",
       })
      console.log(wayPoints);
    }}
 /> 

If you need any further information, feel free to ask!

Thanks in advance!

Answer 1

I fixed the problem by replacing:

onPress={() => {
        wayPoints.splice(key + 1, 0, {
            coordinates: { longitude: 0, latitude: 0 },
            place: "",
            placeholder:
              key === wayPoints.length - 1
                ? "Destination"
                : "Waypoint",
       })

with:

onPress={() => {
        let old = [...wayPoints];
        old.splice(key + 1, 0, {
           coordinates: { longitude: 0, latitude: 0 },
           place: "",
           placeholder:
           key === wayPoints.length - 1
             ? "Destination"
             : "Waypoint",
        });
        setWayPoints(old);
       }}