Socket.io Node Js Server and React js Client not connecting

So first I would like to say that I have looked at many other answers that were given for similar questions, but none worked for me.

My setup is a node js server and a react js client. And I am having trouble doing just a basic setup. Any one who would help me out here, I really appreaciate.

And also on the client code I have alternated through different options for serverUrl from localhost with the http http://localhost:6000 and without localhost:6000. Same for ip address.

NODE JS Server Code

const express = require('express');
const app = express();
const users = require("./routes/api/users");
const profile = require("./routes/api/profile");
const project = require("./routes/api/project");
const auth = require("./routes/api/auth");
const email = require("./routes/api/email");
app.use(express.static(__dirname + '/public'));

const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket)=> {
  console.log("user connected")

  socket.on('SEND_MESSAGE', function(data){
    console.log("message received")
    io.emit('RECEIVE_MESSAGE', data);
})
});

//*** Start of Routes ***//

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:6000");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
})
app.use("/api/users", users);
app.use("/api/profile", profile);
app.use("/api/auth", auth);
app.use("/api/project", project);
app.use("/api/email", email);

//*** End of Routes ***//
const port = 6000;

server.listen(port, () => {
  console.log(`Server Running at ${port}`);
});

REACT JS Client Code

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

class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            username: 'name',
            message: 'hello world',
            messages: []
        };

        this.serverUrl = '127.0.0.1:6000';
        this.socket = io(this.serverUrl, {reconnect: true});

        this.setupSocket();
    }

    setupSocket() {
        this.socket.on('connection', (data) => {
            console.log(`Connected: ${data}`);
        });
    }



    render(){
        return(<p>Hello<p>)
        }
}
export default App