Can't seem to update my GET request data, what am I doing wrong

I have this function:

const getPlayerData = async (playerId) => {
        await ligaApi.get(`/players/${playerId}`).then((res) => {
            console.log('getPlayerData',res.data);
                 //setPlayers(res.data)? not working
        });

That is getting called inside this function:

const getTeamById = useCallback(async (teamId) => {
    await ligaApi.get(`/teams/${teamId}/players`).then((res) => {
        const response = res.data;
        const getPlayerDataRequests = response?.map((x) => x.playerId);

        Promise.all(getPlayerDataRequests).then((res) => {
            console.log('RES',res)
            
            for (let i = 0; i < res.length; i++) {
                const playerData = res[i];
            --> getPlayerData(playerData);
            
            }
        });
    });
}, []);

So in my GET request, I get 3 different object arrays.

{ id: 1373, firstName: 'homer', lastName: 'simpson', email: 'homer.simpson@gmail.com', run: '1235457', …}
    {id: 1595, firstName: 'Jebediah', lastName: 'Springfield', email: 'Jebediah@springfield.com', run: '11111111-1', …}
    {id: 4002, firstName: 'Jugador', lastName: 'De Prueba', email: 'a946657@trbvm.com', run: '5405844-6', …}

The thing is I want to update the state:

const [players, setPlayers] = useState([]);

And when I update the state inside getPlayerData my Web page breaks. My end goal is to map the info through a card list component passing the state as prop but can’t seem to get it.

>Solution :

Try the spread operator as mentioned in this post for arrays in useState: useState on React Hooks not updating Array