Node.js, Socket.io emit in React not working - node.js

Question

I just try to emit and listen socket in client and server:
As below, I only emit a message from the client to the server.
But I only get the message "connected socket" but data emit from client and server is not received.
import React, { useEffect, useState } from 'react'
import InputMainComponent from '#components/InputMainComponent'
import UserService from '../../service/user.service'
import socket from '../../socket/index.js'
import { io } from 'socket.io-client'
function InputMain() {
const [chat, setChat] = useState({
content: "",
error: "",
success: false
});
const handleChange = (e) => {
setChat({
...chat,
content: e.target.value
});
}
const handleSubmit = (idRoom, content, e) => {
e.preventDefault();
socket.connect("connection", (socket) => {
socket.emit('chat', {content: content});
socket.on("chat", (data) => {
console.log(data)
})
})
UserService.createChat(idRoom, content)
.then((res) => {
setChat({
content: "",
error: "",
success: true
});
})
.catch((error) => {
setChat({
...chat,
content: "",
error: error.message,
success: false
});
});
}
return (
<InputMainComponent handleSubmit={handleSubmit} handleOnChange={handleChange} chat={chat}/>
)
}
export default InputMain
And this is in server
//socket
const io = new Server(server, {
cors: {
origin: "http://localhost:3000",
}
});
io.on('connection', (socket) => {
console.log(`User is connected: ${socket.id}`);
socket.on("chat", (data) => {
console.log("Hi");
console.log(data);
io.sockets.emit('chat', msg)
// ...
});
socket.disconnect("disconnect", () => {
console.log(`User is disconnected: ${socket.id}`)
})
});
Finally, I only got this result below
Blockquote
Connected with MongoDB
Hi port:8080
User is connected: ixC-WnX6pzpDE82qAAAB
User is connected: kpQuAqAI2X1CraQjAAAD
User is connected: qJ69YgP4jbVN7w3TAAAF
Thanks a lot.