Tengo este componente en el que quiero actualizar un estado y hacer una matriz con todos los usuarios conectados en una habitación desde un mensaje entrante de socket.on:

 export default function ChatRoom() { const [users, setUsers] = useState([]); const { state } = useLocation(); //to get data from <Home/> component socket.on("message", (msg) => console.log(msg)); useEffect(() => { if (state.connected) { socket.on("userconnected", (msg) => { setUsers((old) => [...old, msg]); console.log(state.username); }); } }, [state.connected, users]);

El nombre de usuario proviene de otro estado del componente en el que envío un mensaje al servidor:

 export default function Home() { const [username, setUsername] = useState(""); const [room, setRoom] = useState(""); const [connected, setConnected] = useState(false); useEffect(() => { if (connected && room && username) { navigate("/chatroom", { state: { username, room, connected }, }); } }, [connected, room, username]); const navigate = useNavigate(); const handleClick = (e) => { e.preventDefault(); socket.emit("connected", username); setConnected(true); };

El problema es que no puedo actualizar el estado con setUsers. Creo que tiene que ver con un problema asíncrono, pero no puedo resolverlo. Básicamente necesito una matriz con todos los usuarios que están conectados.