togetherjs with paperjs in react component

Question

I am trying to integrate togetherjs for a collaboration with a paperjs canvas. Below is the code for setting the paperjs & togetherjs (added as a global object in window)

componentDidMount() {
    this.canvas = ReactDOM.findDOMNode(this.refs.canvasContainer);
    this.paper = new paperjs.PaperScope();
    this.paper.setup(this.canvas);
    this.view = this.paper.view;
    this.tool = new this.paper.Tool();
    this.tool.minDistance = 5;
    this.tool.onMouseDown = this.onMouseDown;
    this.tool.onMouseDrag = this.onDrag;
    this.tool.onMouseUp = this.onMouseUp;
    this.raster = new this.paper.Raster({
      source: null,
      position: this.view.center
    });
    this.raster.scale(0.4);
    this.raster.size = this.paper.view.size;
    this.view.draw();
    this.project = this.paper.project;
    this.drawingLayer = new this.paper.Layer();
    this.drawingLayer.activate();
  }

togetherjs events are added as below in the constructor,

window.TogetherJS.hub.on('draw', this.collabDraw);
window.TogetherJS.hub.on('drawstart', this.collabDrawStart);
window.TogetherJS.hub.on('drawend', this.collabDrawFinish);

However the drawing of new path is not working when the collaborate mode is on. Property this.colabPath is the one holding the path data sent from the peer and is triggered as events, drawstart, draw and drawend (as shown above)

  setCollabUserName() {
    return this.props.profileName;
  }

  newCollabPathStart(point, width, color) {
    this.collabPath = new this.paper.Path();
    this.collabPath.strokeWidth = width;
    this.collabPath.strokeColor = color;
    this.collabPath.add(point);
    this.pathArray.push(this.collabPath);
    return;
  }

  newCollabPathDraw(point) {
    this.collabPath.add(point);
    return;
  }

  newCollabPathFinish() {
    this.collabPath.simplify();
    return;
  }

  collabDrawStart(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathStart(msg.point, msg.color, msg.width);
    this.view.draw();
    return;
  }

  collabDraw(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathDraw(msg.point);
    this.view.draw();
    return;
  }

  collabDrawFinish(msg) {
    if (!msg.sameUrl) {
      return;
    }
    this.newCollabPathFinish(msg.event);
    this.view.draw();
    return;
  }

  onMouseUp(event) {
    event.preventDefault();
    if (!this.props.panStatus) {
      this.path.simplify();
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'drawend'
        });
      }
    } else {
      // check for collab status
      this.canvas.style.cursor = 'grab';
      this.canvas.style.cursor = '-moz-grab';
      this.canvas.style.cursor = '-webkit-grab';
      this.lastX = event.point.x;
      this.lastY = event.point.y;
    }
    this.view.draw();
    threedrUtils.exportJSON(this.project.activeLayer).then(
      (jsonString) => {
        this.props.addAnnotation(jsonString);
      }
    );
  }

  onMouseDown(event) {
    event.preventDefault();
    if (this.props.importAnnotation) {
      this.project.activeLayer.clear();
      this.props.clearImport(null);
    }
    if (!this.props.isStrokeOpen) {
      this.props.toggleStrokeWindow();
    }
    if (!this.props.panStatus) {
      this.canvas.style.cursor = 'default';
      this.path = new this.paper.Path();
      this.path.strokeWidth = this.props.strokeWidth;
      this.path.strokeColor = this.props.strokeColor;
      this.path.add(event.point);
      this.pathArray.push(this.path);
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'drawstart',
          point: event.point,
          color: this.props.strokeColor,
          width: this.props.strokeWidth
        });
      }
    } else {
      // check for collab status
      this.canvas.style.cursor = 'grab';
      this.canvas.style.cursor = '-moz-grab';
      this.canvas.style.cursor = '-webkit-grab';
      this.lastX = event.point.x;
      this.lastY = event.point.y;
    }
    this.view.draw();
  }
  onDrag(event) {
    event.preventDefault();
    if (!this.props.panStatus) {
      this.path.add(event.point);
      if (window.TogetherJS.running) {
        window.TogetherJS.send({
          type: 'draw',
          point: event.point
        });
      }
    } else {
      // check collab status
      event.tool.minDistance = 1;
      this.canvas.style.cursor = 'grabbing';
      this.canvas.style.cursor = '-moz-grabbing';
      this.canvas.style.cursor = '-webkit-grabbing';
      const deltax =  this.lastX -  Math.ceil(event.point.x);
      const deltay =  this.lastY -  Math.ceil(event.point.y);
      this.project.view.scrollBy(deltax, deltay);
    }
    this.view.draw();
  }

it is a lot of code but there is no other way I can explain this issue :|