I am using WebSocket in my reactjs app but having trouble while using WebSocket.send().

This my code:

let ws;

const PushNotifications = () => {
  const [show, setShow] = useState(true);
  const [image, setImage] = useState(null);
  const [title, setTitle] = useState("");
  const [message, setMessage] = useState("");
  const [base64Image, setBase64Image] = useState("");

  ws = new WebSocket("ws://192.168.18.112:8000/ws/notification/");

  const imageUpload = async (e) => {
    setImage(e.target.files[0]);
    console.log(image);
    let base64 = await convertBase64(image);
    setBase64Image(base64);
    console.log(base64Image);
  };

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      if (file) {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = () => {
          resolve(fileReader.result);
        };
        fileReader.onerror = (error) => {
          reject(error);
        };
      }
    });
  };

  const sendNotification = (e) => {
    e.preventDefault();
    console.log("click");
    // let data = { image: base64Image, title: title, message: message };
    if (ws.readyState === WebSocket.OPEN) {
      ws.send("data");
      console.log("Sending notification");
    } else if (ws.readyState === WebSocket.CONNECTING) {
      ws.addEventListener("open", () => sendNotification());
      console.log("Connecting state");
      console.log("Not Send");
    } else {
      console.log("nothing happen");
    }
  };

  ws.onmessage = (e) => {
    console.log(e);
    let { data } = e;
    let messageInfo = JSON.parse(data);
    console.log(messageInfo, "msg");
  };

  ws.onclose = (e) => {
    console.log("disconnect:", e);
  };

  ws.onerror = (e) => {
    console.log(e);
  };

  useEffect(() => {
    ws.onmessage = (e) => {
      console.log(e);
      let { data } = e;
      let messageInfo = JSON.parse(data);
      console.log(messageInfo, "msg");
    };
    ws.onopen = (e) => {
      console.log("connect");
    };

    return () => {
      ws.close = (e) => {
        console.log(e);
      };
    };
  }, [image]);

  return (
<div>
{....}

When I press the button for sending a message the response of the console is "sending notification" and then suddenly the WebSocket closes. my problem is that the ws.send() is not executing and why the WebSocket disconnect suddenly. and also its backend is built with Django.