I am building a podcast app in which all Rooms are rendered in Rooms.jsx FE_URL/rooms and individual rooms are rendered in Room.jsx in FE_URL/rooms/:roomname

I am using a SocketContext and wrapping it on top of the Component tree.

After user creates a podcast he is redirected to FE_URL/rooms/:roomname where inside of a useEffect function i am emitting room-created event , there is a socket listening to the same event emitted from the server on FE_URL/rooms , the thing is i am not able to log the data on FE_URL/rooms despite the it being successfully emitted from the server , now i know what the problem is , the socket instances in both the URLs are different which is causing the error because when i put the socket listening to room-created in Room.jsx in FE_URL/rooms/:roomname it was receiving the data

Room.jsx

import React, { useEffect, useState, useRef , useContext } from "react";
import { useParams } from "react-router-dom";
import "./Room.css";
import { SocketContext } from "../context/socketContext";
import SimplePeer from "simple-peer";

export const Room = () => {
  const { roomname } = useParams();

  const socket = useContext(SocketContext);



  const [myAudioStream, setMyAudioStream] = useState(null);
  const [peers, setPeers] = useState([]);
  const userAudio = useRef();
  const peersRef = useRef();
  const roomID = roomname;

  useEffect(() => {
    socket.on("connect", () => {
      console.log(socket.id);
    });

    // FIRST JOIN A ROOM AT THE SERVER

    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
      userAudio.current.srcObject = stream;
      socket.emit("room-created", {
        podcastTopic: window.sessionStorage.getItem("podcastTopic"),
        hostName: window.sessionStorage.getItem("name"),
        hostProfilePic: window.sessionStorage.getItem("profilePic"),
        roomID: roomID,
      });
    });

    return () => {
      socket.off("connect");
    };
  }, []);

  return (
    <div id="Room-Main">
      <div id="Room-Card">
        <div id="Speakers">
          This Will Have Speakers....
          <audio ref={userAudio}></audio>
        </div>
        <div id="Listeners">This Will Have Listeners....</div>
      </div>
    </div>
  );
};

Rooms.jsx

import React, { useEffect, useState, useContext } from "react";
import { SocketContext } from "../context/socketContext";
import "./Rooms.css";

export const Rooms = () => {
  const socket = useContext(SocketContext);
  const [arrayOfLivePodcasts, setArrayOfLivePodcasts] = useState([]);

  useEffect(() => {
    //need to get info on how to reach the host

    console.log("inside useEffect in Rooms.jsx");

    //not being logged
    socket.on("connect", () => {
      console.log(socket.id, "in Rooms.jsx");
    });

    //not being logged
    socket.on("room-created", (data) => {
      console.log(
        `${JSON.stringify(data)} -- listening to room-created  in Rooms.jsx`
      );
      setArrayOfLivePodcasts((prevArrayOfLivePodcasts) => [...prevArrayOfLivePodcasts , data])
    });
  }, []);

  return (
    <div id="Rooms-Main">
      <div id="Rooms-Heading">
        <h1>JOIN ANY ROOM</h1>
      </div>
      <div id="All-Active-Rooms">
        { Array.isArray(arrayOfLivePodcasts) ? arrayOfLivePodcasts.map((podcast) => {
          return (
            <div id="Podcast-Card" key={podcast.roomID}  >
              <div id="HostProfilePic-Div">
                <img
                  src={podcast.hostProfilePic}
                  alt="HostProfilePic"
                  id="HostProfilePic"
                />
              </div>
              <div id="HostName">{podcast.hostName}</div>
              <div id="PodcastTopic">{podcast.podcastTopic}</div>
            </div>
          );
        }) : <div style={{ color: "white"}} >NO PODCASTS LIVE RIGHT NOW... </div> }
      </div>
    </div>
  );
};

socketContext.jsx

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

const apiUrl =
  import.meta.env.VITE_ENV === "development"
    ? import.meta.env.VITE_API_DEV
    : import.meta.env.VITE_API_PROD;

const socket = io(apiUrl);
const SocketContext = createContext(socket);

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