Which is the preferred way to manage on-demand event like onMouseMove?

dynamic-mouse-events.js

class Comp extends React.Component {
  constructor(props) {
    super(props)
    this.onMouseDown = this.onMouseDown.bind(this)
    this.onMouseMove = this.onMouseMove.bind(this)
    this.onMouseUp = this.onMouseUp.bind(this)
    
    this.state = { onMouseMove: null, onMouseUp: null }
  }

  onMouseDown(evt) {
    this.setState({ onMouseMove: this.onMouseMove, onMouseUp: this.onMouseUp })
  }

  onMouseMove(evt) {
    // do something
  }

  onMouseUp() {
    this.setState({ onMouseMove: null, onMouseUp: null })
  }

  render() {
    const { onMouseMove, onMouseUp } = this.state
    return (
      <div>
        <button 
          onMouseDown={this.onMouseDown}
          onMouseMove={onMouseMove}
          onMouseUp={onMouseUp}
         >drag</button>
      </div>
    )
  }
}

persistent-mouse-events.js

class Comp extends React.Component {
  constructor(props) {
    super(props)
    this.onMouseDown = this.onMouseDown.bind(this)
    this.onMouseMove = this.onMouseMove.bind(this)
    this.onMouseUp = this.onMouseUp.bind(this)
    
    this.dragEnabled = false
  }

  onMouseDown(evt) {
    this.dragEnabled = true
  }

  onMouseMove(evt) {
    if (this.dragEnabled) {
      // do something
    }
  }

  onMouseUp() {
    this.dragEnabled = false
  }

  render() {
    return (
      <div>
        <button 
          onMouseDown={this.onMouseDown}
          onMouseMove={this.onMouseMove}
          onMouseUp={this.onMouseUp}
         >drag</button>
      </div>
    )
  }
}