Я хочу добавить компонент Select из React-Select вместо Form.Control в качестве ввода

Question

Я создаю динамическую c форму, в которой пользователь может добавлять несколько полей элементов одним нажатием кнопки. Однако вместо того, чтобы вводить что-либо в качестве элемента, я хочу, чтобы пользователь выбирал из заданного набора параметров, которые я получаю в componentDidMount. Однако, когда я пытался изменить с response- bootstrap на компонент, и когда я щелкнул по опции, она не была выбрана. В основном я хочу mimi c Form.Control в моем коде, чтобы выбрать с помощью компонента handleChange. Я предполагаю, что опора value не работает должным образом. Если я добавлю value = {el.itemname} в Select, ничего не произойдет, а если я добавлю его в ComponentDidMount, el будет undefined. Мой код следующий:

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
             formdata: [{itemname: '', quantity: '', rate: '', unit: ''}]
        }
        this.handleChange1 = this.handleChange1.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    async handleItems() {

        //Getting items 

        const json = await res.json()
        const status = await res.status
        let arr = []
        for(let i = 0; i < json.length; i++) {
            let obj = json[i].name
            arr.push({value: obj, label: obj})
        }
        await this.setState({itemNames: arr, value: arr})
    }

    componentDidMount() {
        this.handleItems()
    }

    handleAdd() {
        this.setState(prevState => ({
            formdata: [...prevState.formdata, {itemname: '', quantity: '', rate: '', unit: ''}]
        }))
    }

    handleChange(i, e) {
        const {name, value} = e.target
        let formdata = [...this.state.formdata]
        formdata[i] = {...formdata[i], [name]: value}
        this.setState({formdata})
    }

    createform() {
        return this.state.formdata.map((el, i) => (
         <div key={i}>
             <Form.Group controlId="formBasicSize" className = 'form-group'>
             <Form.Label style={{fontWeight:'bold'}}>Item {i+1}</Form.Label>
             <Select options = {this.state.itemNames}/> //Want to do this
             <Form.Control value = {el.itemname} name ='itemname' onChange={this.handleChange.bind(this, i)} 
required type="text" placeholder="Enter a name" required/> //Instead of this
             </Form.Group>
         </div>


    render() {
    return(
        {this.createform()}
    )}
}