Server receiving events sometimes from client and sometimes don't (socket.io library)

Question

Here is my client side code:

import { Socket } from "socket.io-client";
import { DefaultEventsMap } from "socket.io/dist/typed-events";
import { useEffect, useState } from "react";

interface FinalPageProps {
  socket: Socket<DefaultEventsMap, DefaultEventsMap>; //this is the type for sockets
  winner: number;
  control: boolean;
  cards: any;
}

export function Finalizing({ socket, winner, control, cards }: FinalPageProps) {
  const [rang, setRang] = useState("");
  const handleClick1 = () => {
    socket.emit("suitSelected", "hearts");
  };
  const handleClick2 = () => {
    socket.emit("suitSelected", "diams");
  };
  const handleClick3 = () => {
    socket.emit("suitSelected", "spades");
  };
  const handleClick4 = () => {
    socket.emit("suitSelected", "clubs");
  };

  useEffect(() => {
    socket.on("rang", (rangRes) => {
      console.log("Received rang data:", rangRes);
      setRang(rangRes);
    });
  }, [socket, rang]);

  const selectRang = (
    <div className="select-rang-container">
      <h3>Select Rang:</h3>
      <button onClick={handleClick1} className="button-select-rang">
        Hearts
      </button>
      <button onClick={handleClick2} className="button-select-rang">
        Diamond
      </button>
      <button onClick={handleClick3} className="button-select-rang">
        Spades
      </button>
      <button onClick={handleClick4} className="button-select-rang">
        Clubs
      </button>
    </div>
  ) : (
    <div className="select-rang-container">
      <h3>Wait for Player {winner} to choose the Rang</h3>
    </div>
  );

and here is my server side code:

console.log(1111111111)
        io.on("suitSelected", (rangRes) => {
          console.log(rangRes)
          console.log((rang === "spades"))
          console.log((rang === "hearts"))
          console.log((rang === "diams"))
          console.log((rang === "clubs"))
          rang = rangRes;
          if (rang === "spades") {
            io.emit("rang", "Spades");
            console.log(1)
          }
          else if (rang === "hearts") {
            io.emit("rang", "Hearts");
            console.log(2)
          }
          else if (rang === "diams") {
            io.emit("rang", "Diamonds");
            console.log(3)
          }
          else if (rang === "clubs") {
            io.emit("rang", "Clubs");
            console.log(4)
          }
        });

I am not sure what is happening but sometimes when i click on the buttons the event suitSelected is fired perfectly and receives my response from server as well, but other times on server side i only get console.log(1111111111) and nothing else works after that, i have tried using socket.on i have tried clearing out terminals, restarting terminals but still could not pin point the reason. Moreover i have also tried try catch block but still didn't received anything not even on front or back-end