socket io. socket.leave() не работает

есть компонент - Room:

export const Room = () => {

    const {id} = useParams();

    const socket = useContext(SocketContext);

    useEffect(() => {

        if(socket){

            socket.emit('join', id);

            socket.on('new_message_in_room', (msg) => {
 
                console.log(msg);

            })

        }

    return () => {

        socket && socket.emit('leave', id);

    };

    },[socket]);

    const newMessage = () => {

        socket && socket.emit('room_message', {id, msg: "message"})

    }

    return <div onClick={newMessage}>room {id}</div>

}

при заходе на страницу комнаты, все работает отлично, но вот при выходе не срабатывает выход из комнаты (и происходит множественная отправка сообщений если войти в неё снова), хотя имитация происходит.

обработчик на сервере:

const room = (room, socket, io) => {

    socket.join(room);

    socket.on('room_message', (data) => {

        io.to(data.id).emit('new_message_in_room', data.msg);

    });

    socket.on('leave', (room) =>{

        socket.leave(room, () => {

            console.log('leave')

        });
    
    });

}

module.exports = room;