مشکل در راه اندازی socket.io

سلام وقتتون بخیر
من میخوام یک پروژه چت با react.js و express.js طراحی کنم
من در راه اندازی socket.io مشکل دارم وقتی هم ایونت connection رو می نویسم داخلش اصلا هیچ لاگی نشون نمیده
فایل server.js

const express = require("express");
const io = require('socket.io');
const app = express();

app.get('/', (req, res) => res.send('به چت روم خوش آمدید'));
const server = app.listen(8000, (err) => {
    console.log('Server is Running ...');
});

const socket = io(server);
const mySocket = socket.of('/socket');

mySocket.on('connection', (socket) => {
    console.log('User');
});

فایل Chatroom.jsx که کدهای مربوط به صفحه چت روم داخلش هست میخوام با server.js ارتباط کنه

import React, { useRef, useState, useEffect } from 'react';
import SocketIOClient from 'socket.io-client';
import useDarkmode from "../Darkmode/useDarkmode";
import './chatroom.css';
import classNames from 'classnames';

const Chatroom = (props) => {
    // Hooks
    const [theme, switchTheme] = useDarkmode();
    const [newMessage, setNewMessage] = React.useState('');
    const [message, setMessage] = React.useState([]);
    // Connect Socket.io
    const socket = React.useRef(SocketIOClient.connect("http://localhost:8000/socket"));

    React.useEffect(() => {
        console.log(props.location.state);
    }, []);

    const sendMessage = () => {
        if(!newMessage) return;

        socket.current.emit('newMessage', {
            id: '',
            text: newMessage,
            sender: {
                name: props.location.state.name, 
                gender: props.location.state.gender
            },
        })
    };

    // Layout Chatroom Page
    return (
        <>
            <div className="center">
                <div className="container-chatroom">
                    <h1 className="title">چت روم</h1>
                    <div className="app">
                        <section id="messages">
                            <ul className="message-list">
                                {
                                    message.map((message) => {
                                        return <>
                                            <li className={classNames("message-list__item", message.sender.name === props.location.state.name && "leftMessage")}>
                                                <div>
                                                    <div className="row">
                                                        <img title={message.sender.name} className="user-img" src={message.sender.gender === 'male' ? '/images/male_user.png' : '/images/famale_user.png'} alt="User" />
                                                        <h4 className="userName">{message.sender.name}:</h4>
                                                        <p className="userText">{message.text}</p>
                                                    </div>
                                                    <span className="time">4:20</span>
                                                    <button className="btn-delete" title="حذف پیام"><i className="fas fa-trash"></i></button>
                                                </div>
                                            </li>
                                            <hr className="divider-message" />
                                        </>
                                    })
                                }
                            </ul>
                        </section>

                        <section id="send-message">
                            <form action="#" id="form">
                                <input maxLength="80" className="text-message" value={newMessage} onChange={e => setNewMessage(e.target.value)} placeholder="پیام خود را بنویسید ..." required />
                                <button type="submit" onClick={sendMessage} className="btn-send" title="ارسال پیام"><i class="fa fa-paper-plane"></i></button>
                            </form>
                        </section>
                    </div>
                </div>
            </div>
        </>
    )
};

export default Chatroom;

اصلا هیچ خطایی نشون نمیده باید log بگیره ولی نمیگیره

انگار سوکت اصلا کار نمی کنه