This is my main.jsx file(index.js)

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import router from "./routes/index.jsx";
import { SocketProvider } from "./context/SocketContext.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<RouterProvider router={router}>
    <SocketProvider>
        <App />
    </SocketProvider>
</RouterProvider>
);

This is my App.jsx File

import React, { useEffect, useState, useContext } from "react";
import { Outlet } from "react-router-dom";
import { Toaster } from "react-hot-toast";

const App = () => {
    return (
        <div>
            <Toaster></Toaster>
            <Outlet></Outlet>
        </div>
    );
};

export default App;

This is my SocketContext File

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

const SocketContext = createContext(null);

export const SocketProvider = ({ children }) => {
    const [socket, setSocket] = useState(null);

    useEffect(() => {
        const socketInstance = io("http://localhost:4000");
        console.log("socket connected", socketInstance);
        setSocket(socketInstance);

        return () => {
            socketInstance.disconnect();
        };
    }, []);

    return (
        <SocketContext.Provider value={socket}>
            {children}
        </SocketContext.Provider>
    );
};

export default SocketContext;

This is my Homepage.jsx file where I am consuming the context

import "./Homepage.css";
import React, { useState, useEffect, useContext } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import getRandomUsername from "../../helpers/getRandomUsername";
import SocketContext from "../../context/SocketContext.jsx";
const Homepage = () => {
    const navigate = useNavigate();
    const [username, setUsername] = useState("");
    const [room, setRoom] = useState("");
    console.log(SocketContext);
    const socket = useContext(SocketContext);
    console.log("SocketConnection", socket);

    return (
        <div className="homepage">
            {Further data}
        </div>
    );
};

export default Homepage;

Even the console.log() in SocketContext is not printing anything and I think no request is even being made on the server as my server is not also printing anything on connection of client as it is supposed to do.

How can i solve this problem what could be the possible reasons for it