Sending data from the client to the server and displaying to the terminal using `sockets`

On the client side, it calls socket.current.emit in useEffect. I am trying to send the name and age to the server and display the data in the server side io.on terminal. I have no error, nothing is displayed in the terminal.

BACKEND

//server.js

const express = require('express');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 8000;

const server = app.listen(port, () => {
    console.log(`connect on the port ${port} - ${process.env.NODE_ENV}`);
});

const io = require('socket.io').listen(server);


io.on('connection', socket => {
    socket.on('hello', data => {
      console.log({name: data.name, age: data.age});
    });
});

FRONTEND

//client

import React, { useState, useRef, useEffect } from 'react';
import io from 'socket.io-client';


const ChatUser = () => {

    const [values, setValues] = useState({
        chatters: [],
        idReceiver: '',
        idSender: ''
    });

    const [activeUser, setActiveUser] = useState('');
    const [message, setMessage] = useState('');
    const [chats, setChats] = useState([]);

    const socket = useRef();
    

    useEffect(() => {

        if(!socket.current) {
            socket.current = io(process.env.REACT_APP_API);
        }

        if(socket.current) {
            socket.current.emit('hello', {name: 'john', age: '23'});
        }
    }, []);


    return (
        <>  

        </>
    );
};

//env
REACT_APP_API=http://localhost:8000/api

Updated backend

My code in server.js Maybe I should put io.on in different place?

const express = require('express');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();
const db = require('./connection');
const app = express();


// Connect to our Database and handle an bad connections
mongoose
    .connect(process.env.DATABASE, { 
        autoIndex: false
    })
    .then(() => console.log("DB server connect"))
    .catch(() => console.log("DB server disconnect"))


const authRoutes = require('./routes/auth');
const userRoutes = require('./routes/user');
const messageRoutes = require('./routes/message');
const countriesRoutes = require('./routes/countries');
const languagesRoutes = require('./routes/languages');
const tutorRoutes = require('./routes/tutor');

app.use(morgan('dev'));
app.use(bodyParser.json({limit: '50mb'}));

app.use((req,res,next)=>{
    res.header('Content-Type: application/json');
    res.header('Access-Control-Allow-Origin','*'); 
    res.header('Access-Control-Allow-Headers','Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods','GET, PUT, POST, DELETE, OPTIONS');
    res.header('Allow','GET, PUT, POST, DELETE, OPTIONS');

    req.io = io;
    next();
});

if(process.env.NODE_ENV === 'development') {

    app.use(cors());

}

const port = process.env.PORT || 8000;

const server = app.listen(port, () => {
    console.log(`connect on the port ${port} - ${process.env.NODE_ENV}`);
});


const io = require('socket.io').listen(server, {
  cors: {
    origin: '*'
  }
});


io.on('connection', socket => {
    socket.on('hello', data => {
      console.log({name: data.name, age: data.age});
    });
});


//middleware
app.use('/api', authRoutes);
app.use('/api', userRoutes);
app.use('/api', countriesRoutes);
app.use('/api', languagesRoutes);
app.use('/api', tutorRoutes);
app.use('/api', messageRoutes);

Request header

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

from Sending data from the client to the server and displaying to the terminal using `sockets`