Estoy tratando de recuperar datos de api y mostrarlos en mi matriz, pero cuando lo configuro en mi estado de uso, no se actualiza, de lo contrario, se actualiza después de que el primer renderizado significa en el segundo renderizado y en el primer renderizado está devolviendo el estado previo.

Aquí está mi código:

 const getMembers = async (id) => { const groupMembers = await getGroupMembers(id); setLoading(true); setMembersData(groupMembers); if(membersData){ const result = usersList.filter(e => !membersData.some(a => a.userId === e.id)); setRemainingUsers(result); console.log(result) } else { setUsersList(usersList) } setLoading(false); }; let options = remainingUsers.map(function(user){ return { value: user.id, label: user.username} })

Lo que quiero es obtener el valor de los usuarios restantes la primera vez que se llama a la función y se actualiza después del primer procesamiento. Intenté usar useEffect pero no ayudó. También busco en Google con respecto a esto, pero casi todas las soluciones son usar useEffect. Así es como uso el gancho useEffect.

 useEffect(() => {console.log(groupId, group, remainingUsers)}, [ groupId, group, remainingUsers ]);