websocket causing insufficient resources with React useEffect

Question

So I have an app that constantly retrieves data from a peice of hardware. The hardware is connected to a websocket/mqtt server. When I connect to the server over the websocket, I can retrieve the data but after a while even when using react useEffect, chrome crashes giving insufficient resouces error (not there in firefox).

And side note: I have already looked at other questions posted here. None have been helpful.

Here is my code:

function App() {

  const [connected, setConnected] = useState(false);

  let address = 'wss://10.56.113.70/mqtt';
  let options = {
    protocol: 'ws',
    port: 8083,
  };
  // let client = mqtt.connect('ws://10.56.113.177/mqtt', options);
  let client = mqtt.connect(address, options);
  let topic = "some_topic";

  useEffect(()=>{
    client.on('connect', function (data:any) {
      client.subscribe(topic, function (err: any) {
        if (!err) {
          console.log('connected');
          setConnected(true);
        }
      })
    })
  },[connected])

  const [data, setData] = useState(args.tbodyData);
  useEffect(()=>{
    client.on('message', function (topic:string, message:any) {
      let newMsg = message.toString();

      setData(newMsg);
      // console.log(data);
    });
  },[connected, data]);

  return (
   <div>{data}</div>
  )
}