Возможно ли получать каждый раз новые данные по вызову одного и того же события

Новичок в сокетах. Написал небольшое приложение для экспериментирования. Не могу понять. Почему не вызывается слушатель при каждом клике.

Бэк на ноде

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

    const data = {
        name: "pikachu",
    };

    socket.emit("receive_message", data);

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

Фронт на реакте

function App() {
  useEffect(() => {
    socket.on("receive_message", (data) => {
      console.log(data, "zulu");
    });
  }, [socket]);

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

  return (
    <div className="App">
      <button onClick={getRandomHero}>Случайного героя в студию!</button>
    </div>
  );
}

Объект дата с пикачу я получаю каждой раз когда заново обновляю страницу. А как сделать так, чтобы он отдавал мне это при каждом клике?

const data = {
    name: "pikachu",
};