Реагирует js Socket IO обновление проблемы и видимость состояния внутри

Question

Мне нужно получать обновления из сокета, проблема в том, что:

• С code1 я могу подключиться, но я не получаю обновления.
• С code2 я могу подключиться, я получаю обновления, но я не вижу обновленного состояния, которое было обновлено с помощью React.useEffect(), я вижу состояние, как оно было установлено в начале, без изменений.

Можете ли вы помочь мне?

Я хотел бы понять, почему code1 не работает и почему он не видит обновленное состояние с code2.

Code1:

export default function App() {
  const [state, setState] = React.useState({
    center: {},
    socket: undefined
  });

  const { center, socket } = state;

  React.useEffect(() => {
    GeoAreaAPI.getAreas().then(center => {
      let socket = io(wsUrl, {
        query: "token=" + jwtService.getAccessToken()
      });
      socket.emit("position_changed", center);
      socket.on("ps_update", onPsUpdate);
      socket.on("connect", () => {
        socket.emit("position_changed", center);
        console.log("connected");
      });
      socket.on("error", err => {
        console.log("error", err);
      });
      setState({
        ...state,
        center,
        socket
      });
    });
    return () => {
      if (socket) {
        console.log("disconnecting socket");
        socket.disconnect();
      }
    };
  }, []);

  const onPsUpdate = update => {
    console.log("onPsUpdate", update, state);
  };

  return null;
}

Код2:

import React from "react";
import "./styles.css";

import io from "socket.io-client";

export default function App() {
  const [state, setState] = React.useState({
    center: {}
  });

  const { center } = state;

  let socket = io(wsUrl, {
    query: { token: jwtService.getAccessToken() }
  })
    .on("connect", () => {
      //socket.emit("position_changed", newCenter);
      console.log("Connected");
    })
    .on("error", err => {
      console.log("error", err);
    })
    .on("ps_update", update => {
      console.log("onPsUpdate", update, state);
    });

  React.useEffect(() => {
    GeoAreaAPI.getAreas().then(center => {
      socket.emit("position_changed", center);
      socket.on("ps_update", onPsUpdate);
      setState({
        ...state,
        center
      });
    });
    return () => {
      if (socket) {
        console.log("disconnecting socket");
        socket.disconnect();
      }
    };
  }, []);

  const onPsUpdate = update => {
    console.log("onPsUpdate", update, state);
  };

  return null;
}