I need to retrieve the data from the second select , the one where I inserted the class select picker , but the data are not showing when I try to use this bootstrap-select component, the component is working properly I tried but I think that something is wrong with the insertion between the two select tags. Or if anyone knows how can I create a multiselect for that skills will be great. Basically when a student selects a topic then a list of skills will appear and he can select multiple. Now I am trying with the react-bootstrap-multiselect that tadeo suggested but I have similar problem. Thanks in advance .(I have re-modified the code)

import UserContext from "./context/userContext";
import "../styles/slide_left.css";
import { trackPromise } from "react-promise-tracker";
import { getTopics} from "./../services/topicService";
import _ from "lodash"
import Multiselect from "react-bootstrap-multiselect";

class Topic extends Component {
state = {
  topics: [], 
  selectedTopic: {}
}
async componentDidMount() {
  
  const {data: topics} = await trackPromise(getTopics());
  this.setState({topics});

}

selectTopicHandler = (e) => {
  const selectedTopic = this.state.topics.filter(topic => topic.title === e.target.value)
  this.setState({selectedTopic})
}


render() {
  const {topics} = this.state
  return (
    <UserContext.Consumer>
      {(user) => (
        <main
          role="main"
          className="slide-left col-md-9 ml-sm-auto col-lg-10 px-md-4 "
        >
          <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 className="h2">Topic and Skill selection</h1>
            <div className="btn-toolbar mb-2 mb-md-0">
              <div className="btn-group mr-2">
                <button
                  type="button"
                  className="btn btn-sm btn-outline-secondary"
                >
                  Edit
                </button>
                <button
                  type="button"
                  className="btn btn-sm btn-outline-success"
                >
                  Save
                </button>
              </div>
            </div>
          </div>
         
          <div class="form-preferences" > <div  className="form-group">
            ID: {user.name} <div>Email: {user.email}</div>
          </div>
  <form action="" class="form-preferences">
    <div className="form-group">
      <h5>Select your Topic</h5>
        
      <select name="topic" id="topic" className="form-control" onChange={this.selectTopicHandler} >
        {this.state.topics.map(topic=><option>{topic.title}</option>)}
      </select>
    </div> 
    {!_.isEmpty(this.state.selectedTopic) && <React.Fragment> <h5>Select your Skills</h5>
        <Multiselect
     options={this.state.selectedTopic[0].skills.map(skill=><option key={skill} >{skill}</option>)}
      />
       </React.Fragment>} 
     
  </form>
  
</div>

          
        </main>
      )}
    </UserContext.Consumer>
  );
}
}

export default Topic;