Thanks to all the comments,

The problem was browser still needs to access it as localhost because it does not know about the docker service name, and the socket is being formed using the browser and not the container.

// Changes in the backend 
CORS(app, origins=["*","http://localhost:5173"])
socketio = SocketIO(app, cors_allowed_origins=["*", "http://localhost:5173"], logger=True, engineio_logger=True)

// Changes in the frontend 
const socket = io('http://localhost:7784', {transports: ['websocket', 'polling', 'flashsocket']});