state used inside socket.on keeps its default value - reactjs

Question

const [allUsers, setUsers] = useState<ChatUser[]>([]);
const [currentUser, setCurrentUser] = useState<any>();
useEffect(() => {
console.log("all users : ", allUsers);
}, [allUsers]);
useEffect(() => {
const sessionID = localStorage.getItem("sessionID");
if (sessionID) {
socket.auth = { sessionID, username: "AOA_A", isAOA_A: true };
socket.connect();
} else {
socket.auth = { username: "AOA_A" };
socket.connect();
socket.on("connect error", (err) => {
if (err.message === "invalid username") {
console.log("error");
}
});
}
socket.on("session", ({ sessionID, userID }) => {
console.log("session");
// attach the session ID to the next reconnection attempts
socket.auth = { sessionID };
// store it in the localStorage
localStorage.setItem("sessionID", sessionID);
// save the ID of the user
socket.userID = userID;
});
socket.on("users", (data: ChatUser[]) => {
setUsers(() => {
const _users_: any[] = [];
data.forEach((user: ChatUser) => {
user.self = user.userID === socket.userID;
user.messages = [];
/* initReactiveProperties(user); */
_users_.push(user);
});
// put the current user first, and sort by username
_users_.sort((a, b) => {
if (a.self) return -1;
if (b.self) return 1;
if (a.username < b.username) return -1;
return a.username > b.username ? 1 : 0;
});
return _users_;
});
});
socket.on("private message", ({ message, from }) => {
console.log("setting messages", allUsers.length);
for (let i = 0; i < allUsers.length; i++) {
const user = allUsers[i];
if (user.userID === from) {
user.messages.push({
content: message.content,
from: from,
dateTime: "",
});
const _allUsers = [...allUsers];
_allUsers[currentUser.key] = currentUser!.user;
setUsers(_allUsers);
// if (user !== this.selectedUser) {
// user.hasNewMessages = true;
// }
break;
}
}
});
return () => {
socket.off("connect");
socket.off("disconnect");
socket.off("users");
socket.off("user connected");
socket.off("user disconnected");
socket.off("private message");
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
I want to setup a private messaging with MERN stack an socket.io .
At component rendering , it connect to server an the server will emit the list of all actif users , at the this point , the state is successfully updated , the first useEffect will log the updated state but when the socket.on("privated message") is called , when log the value of allUsers inside it is empty.