React Socket io chat becoming unresponsive when spam clicking

Question

Whenever more then one Person is connected and someone is sending messages fast their frontend becomes unresonisve and the server shows the following:

at=info method=GET path="/socket.io/?EIO=4&transport=websocket&sid=WmSvsGiIzxyWoSDvAAAB" host=biglmatthias.herokuapp.com request_id=54963564-8056-4a9d-804c-b7354c054b99 fwd="93.82.46.179" dyno=web.1 connect=0ms service=252278ms status=101 bytes=129 protocol=https

error message server shows

My Client Code

useEffect(() => {
  socket.on('new message', function(data) {
    if (navigator.vibrate) {
      // vibration API supported
      navigator.vibrate(1000);
    }
    addChatMessage(data)
  });
  socket.on('login', function(data) {
    if (!addedUser) {
      addChatMessage({
        username: "SERVER",
        message: "Willkommen beim chat!"
      })
      setloggedIn(true)
    }

  });
  socket.on('user joined', function(data) {
    addChatMessage({
      username: "SERVER",
      message: data + " joined the channel"
    })
  });
  socket.on('user left', function(data) {
    addChatMessage({
      username: "SERVER",
      message: data + " left the channel"
    });
  });
});

My Server:

const express = require("express");
var app = express();
var http = require('http').createServer(app);
const PORT = process.env.PORT||5000;
const path=require('path');


var io = require('socket.io')(http,{


    cors:{
        origin:'*',
    }
});


io.eio.pingInterval=1000;


if(process.env.NODE_ENV==="production"){
    app.use(express.static('build'))
    app.get('*',(req, res) => {
        res.sendFile(path.resolve(__dirname,'build','index.html'));
        }
    )
}

http.listen(PORT, () => {
    console.log(`listening on *:${PORT}`);
});

io.on('connection', function (socket) { /* socket object may be used to send specific messages to the new connected client */
    console.log('new client connected');



    // Funktion, die darauf reagiert, wenn sich der Benutzer anmeldet
    let addedUser = false;


    // Funktion, die darauf reagiert, wenn sich der Benutzer anmeldet
    socket.on('add user', function (username) {
        // Benutzername wird in der aktuellen Socket-Verbindung gespeichert
        socket.username = username;
        console.log(username)
        addedUser = true;

        // Dem Client wird die "login"-Nachricht geschickt, damit er weiß,
        // dass er erfolgreich angemeldet wurde.
        socket.emit('login');

        // Alle Clients informieren, dass ein neuer Benutzer da ist.
        socket.broadcast.emit('user joined', socket.username);
    });


    socket.on('new message', function (data) {
        if (!addedUser){
            return;
        }
        console.log(socket.username+": "+data)


        // Sende die Nachricht an alle Clients
        socket.broadcast.emit('new message', {
            username: socket.username,
            message: data
        });


    });
    socket.on('disconnect', function () {
        if (addedUser) {
            // Alle über den Abgang des Benutzers informieren
            socket.broadcast.emit('user left', socket.username);
        }
    });



});