I am new to react, currently i am working on react app with offline speech recognition. And it seems pretty challenging to me. For now I am just only trying to figure out how web sockets and connections work. Here is my code:

import React, { useRef, useEffect } from 'react';

const URL = 'ws://localhost:2700';
const sampleRate = 16000;

const SpeechRecoPage = () => {
  const socket = useRef(null);

  // calls when page renders
  useEffect(() => {
    if (!socket.current) {
      socket.current = new WebSocket(URL);
    };

    socket.current.onopen = function () {
      console.log('Connection established');
      socket.current.send(`{ "config" : { "sample_rate" : ${sampleRate} } }`);
    };

    socket.current.onmessage = function (event) {
      console.log(`Received message: ${event.data}`);
    };

    socket.current.onclose = function (event) {
      console.log(`Connection closed: ${event.code} ${event.reason}`);
    };

    socket.current.onerror = function (error) {
      console.log(`Error: ${error.message}`);
    };

    // Clean up WebSocket connection on component unmount
    return () => {
        if (socket.current.readyState === WebSocket.OPEN) { // <-- This is important
            socket.current.close();
        }
    };
  }, [socket]);

  const closeConnection = () => {
    socket.current.close()
  };

  return (
    <div>
      <h1>some text</h1>
      <button onClick={closeConnection}>Close server connection</button>
      {/* {isRecording ? (
        <button onClick={stopRecording}>Stop Recording</button>
      ) : (
        <button onClick={startRecording}>Start Recording</button>
      )} */}
    </div>
  );
};

export default SpeechRecoPage;

Here is my logs:

[Log] [HMR] Waiting for update signal from WDS... (0.chunk.js, line 56991)
[Log] Connection established (main.chunk.js, line 1328)
[Error] WebSocket connection to 'ws://localhost:2700/' failed: The operation couldn’t be completed. Socket is not connected
[Log] Error: undefined (main.chunk.js, line 1338)
[Log] Connection closed: 1006  (main.chunk.js, line 1335)

The main thing that I do not understand: if connection is closed and I got this error, where I got this error and how to avoid it?

Appreciate

Tried nothing, just do not understand