Не могу вывести пиксели canvas другому пользователю с websocket

Начала изучать websocket. Хочу чтобы одновременно несколько пользователей могли рисовать на холсте и видеть то что рисуют другие. Бэкенд на nodejs + express, Фронтенд на reactjs. По отправлению координат с бека на фронт через консоль видно что в стейт записываются данные, но на холсте не отображаются. Помогите пожалуйста не могу понять где моя ошибка...

Бэкенд server.js

const express = require("express");
const cors = require("cors");
const { nanoid } = require("nanoid");
const app = express();

require("express-ws")(app);

const port = 8000;

app.use(cors());

const activeConnections = {};

app.ws("/draw", function (ws, req) {
  const id = nanoid();
  console.log("client connected! id=", id);
  activeConnections[id] = ws;

  ws.on("close", (msg) => {
    console.log("client disconnected! id=", id);
    delete activeConnections[id];
  });
  let username = "";

  ws.on("message", (msg) => {
    const decodedMessage = JSON.parse(msg);
    switch (decodedMessage.type) {
      case "SET_USERNAME":
        username = decodedMessage.username;
        break;
      case "CREATE_MESSAGE":
        Object.keys(activeConnections).forEach((connId) => {
          const conn = activeConnections[connId];
          conn.send(
            JSON.stringify({
              type: "NEW_MESSAGE",
              coordinate: decodedMessage.coordinate,
            })
          );
        });
        break;
      default:
        console.log("Unknown message type:", decodedMessage.type);
    }
  });
});

app.listen(port, () => {
  console.log("Server started at port " + port);
});

Фронтэнд App.js

import React, { useState, useRef } from "react";
import { useEffect } from "react";

const App = () => {

  const ws = useRef(null);

   
  const [state, setState] = useState({
    mouseDown: false,
    pixelsArray: [],
  });

  console.log(state.pixelsArray);

  useEffect(() => {
    ws.current = new WebSocket("ws://localhost:8000/draw");

    ws.current.onclose = () => console.log("ws closed");

    ws.current.onmessage = (event) => {
      const decodedMessage = JSON.parse(event.data);
      if (decodedMessage.type === 'NEW_MESSAGE') {
        setState(prevState => { return { ...prevState, pixelsArray: [...decodedMessage.coordinate] } })
      }
    }
  }, []);

  const canvas = useRef(null);
  const canvasMouseMoveHandler = (event) => {
    if (state.mouseDown) {
      event.persist();
      const clientX = event.clientX;
      const clientY = event.clientY;
      setState((prevState) => {
        return {
          ...prevState,
          pixelsArray: [
            ...prevState.pixelsArray,
            {
              x: clientX,
              y: clientY,
            },
          ],
        };
      });

      const context = canvas.current.getContext("2d");
      const imageData = context.createImageData(1, 1);
      const d = imageData.data;

      d[0] = 0;
      d[1] = 0;
      d[2] = 0;
      d[3] = 255;

      context.putImageData(imageData, event.clientX, event.clientY);
    }
  };

  const mouseDownHandler = (event) => {
    setState({ ...state, mouseDown: true });
  };

  const mouseUpHandler = (event) => {
    event.preventDefault();
    setState({ ...state, mouseDown: false, pixelsArray: [] });
    ws.current.send(JSON.stringify({
      type: 'CREATE_MESSAGE',
      coordinate: state.pixelsArray
    }));

  };

  return (
    <div>
      <canvas
        ref={canvas}
        style={{ border: "1px solid black" }}
        width={800}
        height={600}
        onMouseDown={mouseDownHandler}
        onMouseUp={mouseUpHandler}
        onMouseMove={canvasMouseMoveHandler}
      />
    </div>
  );
};

export default App;