live chat app using socket.io and ReactJS

Question

I am building a live chat app using ReactJS and socket.io. I am almost done with the app but stuck at user disconnection. When an user left the room a disconnect message is emitting 4 times as you can see in below picture.

This is my client side code (Not the whole code)

const ChatRoom = ({ location }) => {
    const { userName, setUserName } = useContext(ChatContext)
    const { roomCode, setRoomCode } = useContext(ChatContext)
    const [message, setMessage] = useState('')
    const [chats, setChats] = useState([])
    const ENDPOINT = 'localhost:5000'
    const socket = io(ENDPOINT)
    
    useEffect(() => {
        const { userName, roomCode } = queryString.parse(location.search)
        
        setUserName(userName)
        setRoomCode(roomCode)

        socket.emit('chatroom-join', {userName, roomCode})

        return () => {
            socket.emit('disconnect', {userName})
            socket.off()
        }
    }, [location.search, ENDPOINT])

 useEffect(() => {
        socket.on('message', ({userName, message}) => {
            setChats(chats => [...chats, {userName, message}])
        })
    }, [])

My Server side code

// Socket.io API
io.on('connection', (socket) => {
    socket.on('chatroom-join', ({userName, roomCode}) => {
        console.log('User joined')
        socket.join({roomCode})
        io.to({roomCode}).emit('message', {userName: 'admin', message: `${userName} has joined`})
    })
    
    socket.on('message', ({userName, message}) => {
        io.emit('message', {userName, message})
    })

    socket.on('disconnect', () => {
        io.emit('message', {userName: 'admin', message: 'An user has left'})
        console.log('User disconnected')
        socket.disconnect(true)
    })
})