Скрипт не видит id input'a

Тег input для ввода номера телефона, id которого равен "#phone". Нужно, чтобы при вводе автоматически ставился знак "-". (Например: +7-987-123-45-67)

Нашла jQuery плагин "masked input". Библиотеку jQuery и сам плагин подключила. Далее перетащила код jQuery, но код не видит id "#phone".

Что не так? Или из-за чего он может не видеть айдишник? Воркаю в React'e.

render(){
    const {fields:{adress, cost_type, field_type, time, phone}, handleSubmit} = this.props;
 return(
      <section id="create-field" className="container">
            <h1> Создание поля </h1>
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <div className="form-group">
                <div className="row">
                    <div className="adress">
                       <div className="col-md-3">
                            <p>Адрес:</p>
                       </div>
                       <div className="col-md-6">
                            <input type="text" className="form-control" {...adress} placeholder="Улица"/>
                       </div>
                    </div>
                </div>
                <div className="row">
                    <div className="cost_type">
                        <div className="col-md-3">
                            <p>Доступ к полю:</p>
                        </div>
                        <div className="col-md-3">
                            <select>
                                <option>Выберите тип</option>
                                <option>Платный</option>
                                <option>Бесплатный</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="field_type">
                        <div className="col-md-3">
                           <p>Тип поля: </p>
                        </div>
                        <div className="col-md-3">
                            <select>
                                <option>Выберите тип</option>
                                <option>Открытое</option>
                                <option>Закрытое</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="time">
                        <div className="col-md-3">
                            <p>Рабочее время: </p>
                        </div>
                        <div className="col-md-2">
                            <div className="start-work">
                                <input type="time" className="form-control" {...time} placeholder="00:00"/>
                            </div>
                        </div>
                        <div id="dash" className="col-md-1">
                            <p> - </p>
                        </div>
                        <div className="col-md-2">
                            <div className="over-work">
                                <input type="time" className="form-control" {...time} placeholder="00:00"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="phone">
                        <div className="col-md-3">
                            <p>Телефон: </p>
                        </div>
                        <div className="col-md-6">
                            <input id="phone" type="text" className="form-control" {...phone} />
                        </div>
                    </div>
                </div>
            </div>
                <button type="submit" className="btn btn-success">Создать</button>
            </form>
          <script type="text/javascript" src="src/public/js/jquery-3.1.1.js"></script>
          <script type="text/javascript" src="src/public/js/jquery-3.1.1.min.js"></script>
          <script type="text/javascript" src="src/public/js/jquery.maskedinput.js"></script>
          <script type="text/javascript" src="src/public/js/jquery.maskedinput.min.js"></script>
          <script>
              jQuery(function($){
              $("#phone").mask("+7 (999) 999-9999")
          });
          </script>
      </section>
  );
  }
}