sockets issue

here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
  const socket = io("http://localhost:3000");
  const [roomID, setRoomID] = useState("");
  const [message, setMessage] = useState("");
  const [joined, setJoined] = useState(false);

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

    socket.on("broadcast-message", (message) => {
      console.log(message);
    });

    return () => {
      socket.off("message-delivery");
      socket.off("broadcast-message");
    };
  }, []);

  function joinRoom() {
    if (roomID.trim()) {
      console.log(`joining room ${roomID}`);
      socket.emit("joinRoom", roomID);

      setJoined(true);
    }
  }

  function sendMessage() {
    socket.emit("sendMessage", {
      room: roomID,
      message,
    });
  }

  return (
    <>
      {!joined ? (
        <>
          <h2>Chat App</h2>
          <div className="container">
            <label htmlFor="room">Enter room ID</label>
            <input
              type="text"
              id="room"
              value={roomID}
              onChange={(e) => setRoomID(e.target.value)}
              placeholder="Room ID..."
            />
            <button onClick={joinRoom}>Join Room</button>

            <h2>{message}</h2>
          </div>
        </>
      ) : (
        <>
          <label>Send Message</label>
          <input
            placeholder="message..."
            id="message"
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendMessage}>Send</button>
        </>
      )}
    </>
  );
}

export default App;

here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
  const socket = io("http://localhost:3000");
  const [roomID, setRoomID] = useState("");
  const [message, setMessage] = useState("");
  const [joined, setJoined] = useState(false);

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

    socket.on("broadcast-message", (message) => {
      console.log(message);
    });

    return () => {
      socket.off("message-delivery");
      socket.off("broadcast-message");
    };
  }, []);

  function joinRoom() {
    if (roomID.trim()) {
      console.log(`joining room ${roomID}`);
      socket.emit("joinRoom", roomID);

      setJoined(true);
    }
  }

  function sendMessage() {
    socket.emit("sendMessage", {
      room: roomID,
      message,
    });
  }

  return (
    <>
      {!joined ? (
        <>
          <h2>Chat App</h2>
          <div className="container">
            <label htmlFor="room">Enter room ID</label>
            <input
              type="text"
              id="room"
              value={roomID}
              onChange={(e) => setRoomID(e.target.value)}
              placeholder="Room ID..."
            />
            <button onClick={joinRoom}>Join Room</button>

            <h2>{message}</h2>
          </div>
        </>
      ) : (
        <>
          <label>Send Message</label>
          <input
            placeholder="message..."
            id="message"
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendMessage}>Send</button>
        </>
      )}
    </>
  );
}

export default App;

  const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log(`The user with the id of ${socket.id} has been connected`);

  socket.on("joinRoom", (ID) => {
    socket.join(ID);
    console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
  });

  socket.on("sendMessage", (INFO) => {
    socket.to(INFO.room).emit("broadcast-message", INFO.message);
  });

  socket.on("disconnect", () => {
    console.log(`User with the id of ${socket.id} has been disconnected...`);
  });
});

httpServer.listen(3000, () => {
  console.log("Listening on port 3000...");
});

  const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log(`The user with the id of ${socket.id} has been connected`);

  socket.on("joinRoom", (ID) => {
    socket.join(ID);
    console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
  });

  socket.on("sendMessage", (INFO) => {
    socket.to(INFO.room).emit("broadcast-message", INFO.message);
  });

  socket.on("disconnect", () => {
    console.log(`User with the id of ${socket.id} has been disconnected...`);
  });
});

httpServer.listen(3000, () => {
  console.log("Listening on port 3000...");
});