React Strict mode Socket.io много сообщений

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  </React.StrictMode>
);

import {memo, useEffect, useState} from "react";
import { useLocation, useParams } from "react-router-dom";
import queryString from 'query-string';
import EmojiPicker from "emoji-picker-react";
 
// import socket from "../../socket";
 
import icon from "../../images/emoji.svg";
import styles from "../../styles/Chat.module.css";
import {Messages} from "./components";
import {io} from "socket.io-client";
 
const options = {
    // "force new connection": true,
    // reconnectionAttempts: "Infinity",
    // timeout : 10000,
    transports : ["websocket"]
}
 
const socket = io(`http://localhost:3999`, options);
 
export const Chat = () => {
    const params = useParams();
    // const params = queryString.parse(search);
 
    const [isOpen, setIsOpen] = useState(false);
    const [isConnect, setIsConnect] = useState(false);
 
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([]);
    const [users, setUsers] = useState(0);
 
    console.log('messages: ', messages);
 
    useEffect(() => {
 
 
        socket.emit('join', params);
 
        socket.on('message', ({ data }) => {
            setMessages((prevMessages) => [...prevMessages, data]);
        });
 
    }, []);
 
    useEffect(() => {
 
    }, []);
 
    const openImojiHandler = () => setIsOpen(!isOpen);
 
    const changeMessageHandler = (e) => setMessage(e.target.value);
 
    const onEmojiClickHandler = ({ emoji }) => setMessage(`${message} ${emoji}`);
 
    const addNewMessageHandler = (e) => {
        e.preventDefault();
 
        if(!message) return;
 
        // socket.emit('sendMessage', { message, params });
 
        setMessage('');
    };
 
    const leftRoomHandler = (e) => {
        e.preventDefault();
    };
 
    return (
        <div className={styles.wrap}>
            <div className={styles.header}>
                <div className={styles.title}>Комната: {params.room}</div>
                <div className={styles.users}>{users} пользователей в комнате</div>
                <button className={styles.left} onClick={leftRoomHandler}>
                    Покинуть комнату
                </button>
            </div>
 
            <div className={styles.messages}>
                <Messages messages={messages} name={params.name} />
            </div>
 
            <form className={styles.form} onSubmit={addNewMessageHandler}>
                <div className={styles.input}>
                    <input
                        type="text"
                        name="message"
                        placeholder="Напишите сообщение"
                        value={message}
                        onChange={changeMessageHandler}
                        autoComplete="off"
                        required
                    />
                </div>
                <div className={styles.emoji}>
                    <img src={icon} alt="" onClick={openImojiHandler} />
 
                    {isOpen && (
                        <div className={styles.emojies}>
                            <EmojiPicker onEmojiClick={onEmojiClickHandler} />
                        </div>
                    )}
                </div>
 
                <div className={styles.button}>
                    <input type="submit" onSubmit={addNewMessageHandler} value="Отправить" />
                </div>
            </form>
        </div>
    );
};

const path = require('path');
const dotenv = require('dotenv');
const cors = require('cors');
const logger = require('morgan');
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const cookieParser = require('cookie-parser');
 
const {addUser} = require("./src/data/users");
 
const indexRoutes = require('./src/routes/index.route');
 
dotenv.config({
    path: path.resolve(__dirname, '.env'),
});
 
const PORT = process.env.PORT || 3078;
 
app.use(cors());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
    extended: true,
}));
app.use(cookieParser());
 
app.use('/api', indexRoutes);
 
const server = require('http').createServer(app);
const io = require('socket.io')(server);
 
// const {version, validate} = require('uuid');
 
 
io.on('connection', (socket) => {
 
    socket.on('join', ({name, room}) => {
        // console.log(name, room);
 
        socket.join(room);
 
        const { user } = addUser({name, room});
 
        socket.emit('message', {
            data: { user: { name: 'Admin'}, message: `Привет, ${user.name}` }
        });
 
        socket.broadcast.to(user.room).emit('message', {
            data: { user: { name: 'Admin'},  message: `Пользователь ${user.name} присоединился` }
        });
 
    });
 
    socket.on('sendMessage', ({ message, params }) => {
 
    });
 
    io.on('disconnect', () => console.log('socket disconnected...'))
});
 
 
server.listen(PORT, () => {
    console.log(`Server started on http://localhost:${PORT}`);
 
    mongoose.connect(
        process.env.MONGO_URL, {
            useNewUrlParser: true,
        },
    ).then(() => {
        console.log('Connection mongodb success!!!');
    }).catch((error) => console.log(error));
});

    useEffect(() => {
 
 
        socket.emit('join', params);
 
        socket.on('message', ({ data }) => {
            setMessages((prevMessages) => [...prevMessages, data]);
        });
 
        return () => {
            socket.off('join');
            socket.off('message');
        };
 
    }, []);

    devServer: {
     hot: false,
    },