React - Select slow execution

Возникает сложность с компонентом React-Select, заполняю options из API, при большом количестве опций при открытие сталкиваюсь с слишком сильными фризами, падает фпс и пролистать опции либо отфильтровать практически не возможно, Просьба, подсказать, возможно ли как то исправить это?

app.jsx

<Country
    dropOptions='country'
 /> 

Country.jsx

import React, { Component } from 'react';
import axios from 'axios';
import Select from "react-select";


export default class Country extends Component{

    constructor(props){
        super(props)
        this.dropOptions = props.dropOptions
        this.state = {
            country: '',
            selectedOption: []
        }
        console.log(this.dropOptions)
    }

    

    async getOptions() {
        const response = await axios.get(`/flask-dash/options/${this.dropOptions}`)
        const data = response.data

        const options = data.map(d => ({
            'value': d.id,
            'label': d.id
        }));

        this.setState({selectedOption: options})

    }

    handleChange(e){
        this.setState({id: e.value, country: e.label})
    }

    componentDidMount(){
        this.getOptions()
    }

    render(){
        return(
            <div>
                <Select
                    options={this.state.selectedOption}
                    onChange={this.handleChange.bind(this)}
                    isMulti
                    placeholder='Select country'
                />
            </div>
        )
    }
}

Ответы (0 шт):