Draggable panel in react (initial take)

gistfile1.txt

import React, { Component } from "react";

class Panel extends Component {
  state = {
    width: 200,
    dragging: false,
    offset: 0
  };
  dragStart = e => {
    this.setState({ dragging: true });
    document.addEventListener("mousemove", this.drag);
    document.addEventListener("mouseup", this.dragStop);
  };

  drag = e => {
    if (this.state.dragging) {
      this.setState({
        width: e.clientX - this.state.offset
      });
    }
  };

  dragStop = e => {
    this.setState({ dragging: false });
    document.removeEventListener("mouseup", this.dragStop);
    document.removeEventListener("mousemove", this.drag);
  };

  setWrapperRef = ref => {
    this.wrapper = ref;
  };

  componentDidMount() {
    this.setState({
      offset: this.wrapper.offsetLeft
    });
  }

  render() {
    return (
      <div
        ref={this.setWrapperRef}
        style={{
          flexDirection: "row",
          width: this.state.width
        }}
      >
        <div>{this.props.children}</div>

        <div
          style={{
            width: "0",
            border: "1px solid red",
            height: "100vh",
            marginLeft: "auto"
          }}
          onMouseDown={this.dragStart}
        />
      </div>
    );
  }
}

export default Panel;