React Typescipt : UseState of Object Array only updates once in for loop

So I'm kind of new in typescript and trying something out. I want to randomize X quantity of players betweent X quantity of teams/groups to play a game with.( react native ts mobile app)

Weird behavior (atleast for me) the for loop that I'm using to update the teams in a state array does runs twice because I can see it in the logs and if I save my VS code document the second update in the state array does occus, but ofcourse I want it right the first time.

const [groupsWPlayer, setGroupsWPlayers] = useState<{title: string; players:string[]}[]>([]);  const [groups, setGroups] = useState<string[]>(route.params?.groups);  const [players, setPlayers] = useState<string[]>(route.params?.players);  const AsignPlayersToGroupsAtRandom =  () => {    setPlayers(arrayShuffle(players));    for(let i =0; i <= groups.length-1; i++){      console.log(i +" / " + groups.length);      console.log("Group  =  " + groups[i]);      setGroupsWPlayers([...groupsWPlayer, {title:groups[i], players:players}])      }  }

 {groupsWPlayer.map((group, index) => (<View key={index}><Text> title = {group.title}</Text><Text>{group.players}</Text><Text>{groupsWPlayer.length}</Text></View>

LOGS /0 / 2LOG Group = Ok (group name)LOG 1 / 2LOG Group = Niet oke (group name)

But it only renders the last group, not the first and the last, which i wanted to.

So for some reason the setGroupsWPlayers only runs once, doe somebody know why and cares to explain to me why? Even if it's a rookie mistake, i'm trying to learn. Thanks in advance