Прокрутите поле выбора не на странице

Я получаю данные из API и затем показываю их как параметры в полях выбора. Параметр, выбранный в первом поле выбора, заполнит параметры для второго поля выбора. и после этого мы отправим форму, которая перенаправит нас на другую страницу. Вся эта функция работает нормально. Прокрутка в полях выбора работает нормально при нажатии клавиш клавиатуры и перетаскивании полосы прокрутки. Я застрял в том, что всякий раз, когда я прокручиваю параметры, страница прокручивается вместо раскрывающегося списка параметров, и я не хочу использовать JQuery, поскольку его не рекомендуется использовать с ReactJs. Есть ли у них какой-либо другой вариант, кроме JQuery, для выполнения этой операции?

import React from 'react';
import { Route, Redirect } from 'react-router'
import { Async } from 'react-select';
import Select from 'react-select'
import { renameKeys } from '../utils'

export class ExplorePage extends React.Component {
  constructor() {
    super()
    this.state = {
      cityValue: null,
      universityValue: 0,
      unselectedUnivValue: [],
      os: "",
      classes: "",
      class2: ""
    }
    this.universitySelectChange = this.universitySelectChange.bind(this);
    this.citySelectChange = this.citySelectChange.bind(this);
    this.getCities = this.getCities.bind(this)
    this.getUniv = this.getUniv.bind(this)
    this.osCheck = this.osCheck.bind(this);
  }

  osCheck() {
    this.state.os = navigator.platform;
    console.info(this.state.os);
    if (this.state.os == 'Win32') {
      this.state.classes = document.getElementsByClassName('Select-placeholder');
      for (var i = 0; i < this.state.classes.length; i++) {
        this.state.classes[i].classList.add('for-Win32');
      }
      this.state.class2 = document.getElementsByClassName('Select-value');
      for (var i = 0; i < this.state.class2.length; i++) {
        this.state.class2[i].classList.add('for-Win32');
      }
    }
  }

  componentDidMount() {
    this.osCheck();
  }

  componentWillUnmount() {
    this.osCheck();
  }

  universitySelectChange = (universityValue) => {
    this.setState({ universityValue });
  }
  citySelectChange = (cityValue) => {
    this.setState({ cityValue });
    this.getUniv(cityValue).then((options) => { this.setState({ unselectedUnivValue: options }) })
  }
  getCities() {
    return fetch(`API`)
      .then((response) => response.json())
      .then((json) => {
        let newKey = { city_id: 'value', name: 'label' }
        return {
          options: json.response.result.map((item) => renameKeys(item, newKey))
        }
      })
  }

  getUniv(cityValue) {
    return fetch(`API`)
      .then((response) => response.json())
      .then((json) => {
        let newKey = { university_id: 'value', name: 'label' }
        let toReturn = json.response.result.map((item) => renameKeys(item, newKey))
        return toReturn
      })
  }

  render() {
    return <section id = "scroll-section6" className = "explore-res img-bg height-70 d-flex align-items-center">
      <div className = "container">
        <div className = "row">
          <div className = "col-lg-12 mt-5 pt-5">
            <div className = "st-sec-content">
              <h1 className = "st-sec-heading">EXPLORE RESIDENCES</h1>
              <form>
                <ul className = "res-prop-select-group">
                  <li>
                    <div className = "city-icon"></div>
                    <Async
                      onChange = {() => { this.osCheck(), this.citySelectChange }}
                      loadOptions = {this.getCities}
                      placeholder = "Select your City"
                      removeSelected = {this.state.removeSelected}
                      simpleValue
                      value = {this.state.cityValue}>
                    </Async>
                  </li>
                  <li>
                    <div className = "country-icon"></div>
                    <Select multi
                      onChange = {() => { this.osCheck(), this.universitySelectChange }}
                      options = {this.state.unselectedUnivValue}
                      placeholder = "Select your College"
                      removeSelected = {this.state.removeSelected}
                      simpleValue
                      value = {this.state.universityValue}>
                    </Select>
                  </li>
                  <li>
                    <button className = "st-l-hm-btn-1 a-link go mr-0">
                      <a class = "text-white font-weight-light"
                        href = {this.state.cityValue === null ? '/residence' : `/residence/${this.state.cityValue}/${this.state.universityValue}`}
                        onClick = {(e) => {
                        }}>Go</a></button>
                  </li>
                </ul>
              </form>
            </div>
          </div>
        </div>
      </div >
    </section >
  }
}