Can someone explain me that how to fetch real time onlineUser data in the code shown here?

Frontend code:

import "./Convo.css";
import React, { useEffect } from 'react'
import User from "./User/User";
import { useParams } from "react-router-dom";
import { socketServer } from "../../ContextAPI/SocketContext/socketcontext";

function Convo({data, userId}) {
  const {id} = useParams(); 
  const highLight = (convoId,paramsId) => {
    return (convoId === paramsId) ? "selected" : "";
  }
  const token = localStorage.getItem("token");
  const {connectSocket,onlineUser} = socketServer();
 
  useEffect(()=>{
    connectSocket(token);
  },[token,connectSocket]);  
  
  console.log(onlineUser);
  
  
  return (
    <div className="row convo-part justify-content-start align-items-start">
        <div className="row justify-content-start align-items-start fix-convo-box">
          { (data !== "No Users" && userId !== "Logout") ? data?.map(value => <User activeUser={onlineUser} userData={value} selected={highLight(value._id,id)} path={value._id}  key={value._id} userId={userId}/>) : data}
        </div>
    </div>
  )
}

export default Convo;

Context API code:

import { io } from "socket.io-client";
import { create } from "zustand";

const socketServer = create((set)=>({
    socket: null,
    onlineUser: [],
    connectSocket: (token) => {
        const socket = io("http://localhost:4000",{
            auth: {
                token: token,
            }
        });
        socket.on("onlineUser",(onlineData)=>{
            set({onlineUser: onlineData});
        }); 
        set({socket: socket});
    }
}));

export {socketServer}

Backend code:

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";
import { verifyToken } from "../lib/verifyToken/verifyToken.js";

const user = {};
const app = express();
const server = createServer(app);
const io = new Server(server,{
    cors:{
        origin: "http://localhost:3000",
        methods: ["GET","POST"],
        allowedHeaders: ["Content-Type","Authorization"],
        credentials: true
    }
});

//if token is invalid disconnect
io.use((socket,next)=>{
    const token = socket.handshake.auth.token.split(" ")[1];
    const checkToken = verifyToken(token);
    if(!checkToken){
        socket.disconnect(true);
        next(new Error("invalid"));       
    }
    socket.data.id = checkToken.id;
    next();
});

io.on("connection",(socket)=>{
    console.log("a user connected",socket.id);
    
    //////////online users////////////
    if (socket.data.id) {
        user[socket.data.id] = socket.id;
    }
    socket.emit("onlineUser",Object.keys(user));
    
    ///////////////////////////////

    socket.on("disconnect",()=>{
        delete user[socket.data.id];
        socket.emit("onlineUser",Object.keys(user));
        console.log("a user disconnected",socket.id);
    });
});

export {server , app}

I am trying to fetch realtime online user but I did not get it until I refresh the browser