Can't emit data to a room with socket.to(room).emit(/*....*/) but simple emit works

Question

So can't get socket.to("room").emit() to work whereas simple emit works. I am making a simple chat app. I put a counter variable so I can know how many people are in the room. I just can't figure out how to make this work.

server.js (see the send message event)

const app=require('express')();

const server=require('http').createServer(app);

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

var count=0;

io.on("connection", (socket) => {
  console.log("Socket id-",socket.id);
  console.log("socket is ready to be connected");

    socket.on("join_room",(data)=>{

        
        socket.join(data);
        console.log(`User with ${socket.id} connected in room ${data}`);
        console.log("no of ppl in room",count++);
    });
    
    

    socket.on("send_message",(curr_message)=>{
        console.log(curr_message.room);
        socket.to(curr_message.room).emit("recieve_message",curr_message);
    });

    socket.on("disconnect",()=>{
        console.log("User disconnected...",socket.id);
    });

});

server.listen(5000,()=>console.log("srever is listening at port 5000..."));

chat.js(see useEffect hook)

import React from 'react';
import {useState,useEffect} from 'react';
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';


function Chat({username,room,socket}) {

    const [message,setMessage]=useState('');
    const [messageList,setMessageList]=useState([]);

    const sendMessage=async ()=>{
      if(message !== "")
      {
        const messageData={

          author: username,
          room: room,
          message: message,
          time:
           new Date(Date.now()).getHours() +
            ":"+
             new Date(Date.now()).getMinutes(),

        };

        console.log("sending message",messageData);
       await socket.emit("send_message",messageData);

      }

    }

    useEffect(()=>{
      socket.on("recieve_message",(data)=>{
        console.log("recieving message",data);
        setMessageList((list)=>[...list,data]);
      });

    }, [socket]);

  return (
    <div className='chat-window'>
  <div className='chat-header'>
    <p> Live Chat</p>  
    </div>
    <div className='chat-body'>
      {
        messageList.map((messageContent)=>{
         return <h1>{messageContent.message}</h1>;
        })
      }
    </div>
  <div className='chat-footer'>
    <input type="text" placeholder="chat here..." value={message} onChange={(e)=>setMessage(e.target.value)} />
    <Button className="Button" variant="contained" endIcon={<SendIcon />}  onClick={sendMessage} ></Button>
    </div>
    </div>
  
  );
}

export default Chat;

app.js (I don't think problem is here)

import './App.css';
import {useState,useEffect} from 'react';
import io from 'socket.io-client';
import Chat from './Chat';
import Button from '@mui/material/Button';
// import {Container} from 'react-bootstrap';

function App() {

  const socket = io.connect("http://localhost:5000");

  const [userName,setUserName]=useState('');
  const [roomCode,setRoomCode]=useState('');
  const [showChat,setshowChat]=useState(false);


  const joinRoom = ()=>{
    if(userName!==''&&roomCode!==''){
      socket.emit("join_room",roomCode);
      setshowChat(true);
    }
  }

  return (
    <div className="App">
     {!showChat ? 

      (<div className='joinChatContainer'>
        <h3>Join Room</h3>
      <input type="text" placeholder="Your Name" value={userName} onChange={(e)=>setUserName(e.target.value)}/>
      <input type="text" placeholder="Room Code" value={roomCode} onChange={(e)=>setRoomCode(e.target.value)}/>
      <button onClick={joinRoom}>Join Room</button>
      </div>
        ) : 
       
        (<Chat username={userName} room={roomCode} socket={socket} />)
        
      }
    </div>
  );
}

export default App;