Socket.IO custom event not triggered

Frappe Framework
1

Custom realtime

function app_handlers(socket) {

    socket.on("app_chat_data", function (user) {
        // Permission check (important)
        socket.has_permission("User", user).then(async () => {

            await notify_user({
                socket,
                user
            });

        }).catch(() => {
            // silently ignore permission failure
        });
    });
}


async function notify_user(args) {
    if (!(args && args.socket && args.user)) return;

    const socket = args.socket;
    const user = args.user;

    const target_room = user_room(args.socket.user);
    const value = await socket.call(
        "app.api.chat.chat_data"
    );

    // notify ONLY that user
    socket.nsp.to(target_room).emit("app_chat", {
        value
    });
}

const user_room = (user) => "user:" + user;

module.exports = app_handlers;

react

  useEffect(() => {
    if (!socket || !authUser?.email) return;

    // Ask server for data
    socket.emit("app_chat_data", authUser.email);

    const handler = (event: any) => {
      console.log("chat data:", event);
    };

    socket.on("app_chat", handler);

    return () => {
      socket.off("app_chat", handler);
    };
  }, [socket, authUser?.email]);

react emitting the event but app_chat_data event does not trigger