I'm trying to set up socket on my already existing react.js application. It's a basic one that uses express and node to connect to a mongoose DB. I've set up socket on the client side.

Main.js

import { io } from 'socket.io-client'
var socket = io.connect('http://localhost:3000')
function Home(props) {
      const {username} = useParams()
      const [Username , setUsername] = useState("")
      const [SearchedData, setSearchedData] = useState() 
      const [Data, setData] = useState()
          return (
          <div className="App">
            <NavBar CurrentUser={username} Search={setSearchedData}/>
        {(Data !== undefined)? <Content CurrentUser={username} Data={SearchedData} HomeData={Data}></Content>
          :
        <Loading></Loading>}
        </div>)
    }

server.js

require('dotenv').config('./secret.env')
const express = require("express")
const app = express()
const cors = require("cors")
const router = express.Router();
const mongoose = require("mongoose")
const mongo = require("mongodb")

const server = app.listen(3000, () => {
    console.log("listening to on 3000")
})
var socket = require('socket.io')

var io = socket(server)

io.on("connection",(socket) => {
    console.log("Socket Connection")
})

 app.use('/user', require("./route/NodeRoute"))
 app.use('/', require('./route/LoginRoute'))
 app.use('/create',require('./route/Create'));

I use run npm start and nodemon serve.js to run the frontend and backend. But the connection to the socket is made only when I terminate the connection to my react app (CTRL + C) in the terminal. The app run on port 3000 and server runs on 3001

I've tried using another port but it didn't work.