Socket.io Server Emit only works after server restart

[g4rry420]

I am emitting a initial socket when the application loads for the first time. The problem is, I am not getting my emitted result in the client side. I have build my client side app using the React.However, if I restart the server, then I can see the result in the client. But when I refresh the client page, then the result from the server didn't reach. I have console.log the output in the server side too, seems like emitting is done through the server but somehow inbetween didn't reach the client. There was also issue related to this in stackoverflow but that didn't solve my problem. stackoverflow issue.

Here is my code
Server

   const io = socket(server, {
        cors: {
            origin: "*"
        }
    });
    let currentUser;
    io.use((socket, next) => {
        const accessToken = socket.handshake.query.accessToken;
        if(!accessToken) {
           return next(new Error(`There is no AccessToken Found! time =>${new Date().toLocaleString()}`));
        }else{
            try {
                //if the incoming request has a valid token, we extract the payload from the token and attach it to the request object.
                const payload = jwt.verify(accessToken, process.env.SECRET);
                currentUser = payload.user;
                return next();
            } catch (error) {
                // token can be expired or invalid. Send appropriate errors in each case:
                if (error.name === "TokenExpiredError") {
                    console.log(`AccessToken is Expired! time =>${new Date().toLocaleString()}`)
                    return next(new Error(`AccessToken is Expired! time =>${new Date().toLocaleString()}`));
                } else if (error.name === "JsonWebTokenError") {
                    console.log(`Invalid Access Token! time =>${new Date().toLocaleString()}`)
                    return next(new Error(`Invalid Access Token! time =>${new Date().toLocaleString()}`));
                } else {
                  //catch other unprecedented errors
                  console.log(`Unknown Error time =>${new Date().toLocaleString()}`, error)
                  return next(new Error(`Unknown Error time =>${new Date().toLocaleString()}`));
                }
            }
        }
    })

    io.on("connection", async socket => {
        const socketId = socket.id;
        console.log('connection socketId=>', socketId, 'time=>', new Date().toLocaleString());

        await getAllGroup((error, getAllGroups) => {
            if(error){
                socket.emit("initSocketSuccess", { error: error });
            }
            console.log("I AM CALLED")
            socket.emit("initSocketSuccess", { success: getAllGroups }, (response) => {
                console.log(response.status)
            });
        });
        
        //create a group
        socket.on("createGroup", async (data, clientCallback) => {
            try {
                const createdGroup = await createGroup(data);
                clientCallback(createdGroup);
            } catch (error) {
                console.log('error', error.message);
                io.to(socketId).emit('error', { code: 500, message: error.message });
            }
        })
    })

Client

import React,{ useEffect, useState } from 'react'

import "./groups.styles.css"
import api from "../../api"
import { socket } from "../../InitApp/index"

function Groups({ match, location, currentUser }) {
    const [groupsList, setGroupsList] = useState([]);

    useEffect(() => {
        console.log(socket.connected)
        socket.on("initSocketSuccess", (result, callback) => {
            console.log(result)
            callback({ status: "ok" })
        })

        return () => {
            socket.removeAllListeners("initSocketSuccess");
        }
    },[socket])

    return (
        <div className="container list-main-container">
            
        </div>
    )
}

export default Groups