'ds' не определено

У меня есть несколько элементов DIV, которые я делаю доступными для выбора с помощью библиотеки DRAGSELECT. В компонентеDidMount,

componentDidMount() {
      var ds = new DragSelect({
    selectables: document.getElementsByClassName('ele-select'),
    area: document.getElementById('canvas'),
    onElementSelect: (element) => {
      var idArray = [];
      idArray.push(ds.getSelection())
     this.check(idArray)
    }
  })
    $('.text').draggable({
      cursor: 'move'
    })

    $('#canvas').on('mousedown', '.main-container',  (e) => {
      if ($(e.target).attr('class').indexOf('main-container') > -1) {
        this.unwrapAll()
        ds.start()
      } else {
        //idArray = []
        ds.stop();
        ds.break();
      }
    })
    $('#canvas').on('mouseup', function (e) {
      //idArray = []
      ds.stop();
      ds.start()
    })
  }

Это приводит к ошибке: «ds» не определен no-undef

Однако я исправил ошибку, используя - /* eslint no-undef: 0 */ // --> OFF в верхней части компонента.

Теперь, когда я пытаюсь добавить новый элемент и сделать его доступным для выбора, он выдает: ReferenceError: ds не определен.

Я уверен, что это связано с областью действия переменной, поскольку var имеет функциональную область. Но где я должен объявить об этом тогда? даже пробовал внутри конструктора, но, похоже, не работает.

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery'
import 'jquery-ui/ui/widgets/draggable';
import DragSelect from 'dragselect';
import Button from './components/Button/Button'

/* eslint no-undef: 0 */ // --> OFF
class App extends Component {
 state = {
   btn: ['Add Element', 'Wrap', 'Unwrap']
 }
  componentDidMount() {
      var ds = new DragSelect({
    selectables: document.getElementsByClassName('ele-select'),
    area: document.getElementById('canvas'),
    onElementSelect: (element) => {
      var idArray = [];
      idArray.push(ds.getSelection())
     this.check(idArray)
    }
  })
    $('.text').draggable({
      cursor: 'move'
    })

    $('#canvas').on('mousedown', '.main-container',  (e) => {
      if ($(e.target).attr('class').indexOf('main-container') > -1) {
        this.unwrapAll()
        ds.start()
      } else {
        //idArray = []
        ds.stop();
        ds.break();
      }
    })
    $('#canvas').on('mouseup', function (e) {
      //idArray = []
      ds.stop();
      ds.start()
    })
  }


clickHandler = (val) => {
if (val === 'Add Element'){
  this.addElement();
}
}
addElement = () => {
  var x = $('.text:last')
  var top = parseFloat(x.css('top').slice(0, -2))
  x = x.attr('id').slice(-1)
  $('.main-container').append("<div class='text ele-select'>" +Math.random()+ "</div>")
  $('.text:last').attr('id', 'text' + (++x))
  $('.text:last').css({
      'top': top + 27
  })
  $('.text:last').draggable({
      cursor: 'move'
  })
 ds.addSelectables(document.getElementsByClassName('ele-select'));
}
  render() {
    var button = this.state.btn.map((element,i) => {
      return <Button value = {element} clicked = {() => this.clickHandler(element)} key = {i + element}/>
    })
    return (
      <div>
       {button}
      <div id='canvas'>
        <div className = "main-container">
          <div className = "text ele-select" id='text1' draggable = "true">Some text</div>
          <div className = "text ele-select" id='text2' draggable = "true">Another text</div>
        </div>
      </div>
      </div>
    );
  }
}


export default App;