Not able to connect my react vite frontend to server which is hosted in Render

Question

https://github.com/ShyanRoyChoudhury/ChatApp/tree/master

Here is the github link to my repo.

Frontend code:

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';

import './App.css'
//import { socketAtom } from '../store/atoms/socketState';

import JoinRoomPage from './components/JoinRoomPage';
import ChatPage from "./components/ChatPage";
import io from 'socket.io-client';
import { createContext } from 'react';
import { Socket } from 'socket.io-client';
//import { useSetRecoilState } from 'recoil';
import { Server_URL } from '../config.ts'
import { Header } from './components/Header.tsx';


let socket: Socket | null;
if(Server_URL){
  socket = io(Server_URL);
}
export const SocketContext = createContext<Socket | null>(null);

function App() {

  //const setSocketState = useSetRecoilState(socketAtom);
  //setSocketState(socket)
  document.title = "ChatRoom"

  return (
    <SocketContext.Provider value={socket}>
    <div>
        <Router>
          <Header />
          <Routes>
            <Route path="/" element={<JoinRoomPage />} />
            <Route path="chat" element={<ChatPage />} />
          </Routes>
        </Router>
    </div>
    </SocketContext.Provider>
  )
}

export default App;

Backend Code:

import express from 'express';
var http = require('http');
import cors from 'cors';
import { Server } from 'socket.io';
const port = 4000 || process.env.PORT;
const app = express();
app.use(cors());
import leaveRoom from '../utils/leaveRoom';

const server = http.createServer(app);

const io = new Server(server, {
    cors: {
        origin: '*',
        methods: ['GET', 'POST'],
    },
});

const CHAT_BOT = 'ChatBot';

let chatRoom = '';
let allUsers:any[] = [];

io.on('connection', (socket) =>{
    console.log(`user connected ${socket.id}`)

    socket.on('join_room', (data) => {
        const { name, room } = data;
        socket.join(room);

        console.log(data);
        
        let _createdtime_ = Date.now();
        socket.to(room).emit('receive_message',{
            message: `${name} has joined the Room`,
            username: CHAT_BOT,
            _createdtime_
        });

        socket.emit('receive_message', {
            message: `Welcome ${name}`,
            username: CHAT_BOT,
            _createdtime_
        });

        socket.on('send_message', (data) => {
            const { name, room, text, _createdtime_} = data;
            socket.to(room).emit('messages', {
                message: text,
                username: name,
                _createdtime_
            });
            socket.emit('messages', {
                message: text,
                username: name,
                _createdtime_
            });
            


            // db connection to be added here
            // .......
            //
            //
            //
        })

        allUsers.push({id: socket.id, name, room});
        let chatRoomUsers = allUsers.filter((user)=>user.room === room);
        socket.to(room).emit('Room_users', chatRoomUsers);  // to other participants
        socket.emit('Room_users', chatRoomUsers);   // to sender

        socket.on('leave_room', (data)=>{
            const { name, room } = data;
            socket.leave(room);
            console.log('roomleft')
            
            let _createdtime_ = Date.now();
            allUsers = leaveRoom(socket.id, allUsers) //update the all users present in the room
            socket.to(room).emit('Room_users', allUsers)
            
            socket.to(room).emit('receive_message', {
                message: `${name} has left the chat`,
                username: CHAT_BOT,
                _createdtime_
            })
        })

        socket.on('disconnect', () => {     //  handle user disconnect event
            console.log(`User disconnected ${socket.id}`);

            allUsers = leaveRoom(socket.id, allUsers);

            const rooms = Object.keys(socket.rooms); // getting the rooms user was part of

            rooms.forEach((room) => {   // update user list in each rooms
                io.to(room).emit('Room_users', allUsers);
            })
        });

    })
});

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

I tried pinging my server link. But it isn't responding. dont seem to understand the issue. server link: https://chatrooom-server.onrender.com

First i am trying to connect my frontend which is in my local pc to connect to the server hosted in Render. Getting no response from server. Once i can establish this connection I will connecting my hosted frontend to hosted server