I'm creating a project where I need to render almost 2100+ select option. But whenever I render with default bootstrap select option than I render too slow. That's why I do use react-select & react-window. I follow many way to solve it but can't.

How can I solve it?

Dependencies

• react-select
• react-window
• react-bootstrap

Information

• I'm getting 2100+ data with useSelector from redux store.
• Wherever I look for solve this issue, I found this example everywhere. Here they use loop to render 2500 or more. But my data are coming from redux store.
• My data is look like

data = [{"title": "A", "key": "a", "code": "512"},
        {"title": "B", "key": "b", "code": "513"}
        .....
       ]

• I need to create select option with title.
• I'm using functional component to use useSelector that's why I can't get data outside component.
• I can't create a code sandbox cause of there the data will be missing.
• I have follow many ways to solve this but can't. Here I'm providing current situation of my code.

Code

import React from 'react'
import { useSelector } from 'react-redux'
import Select, { createFilter } from 'react-select';
import { FixedSizeList as List } from 'react-window'


const Board = () => {

    const icons = useSelector(state => state.icons.iconsData)
    

    return (
        <>
            <div className="container py-5">
                <div className="d-flex flex-row">
                    <div>
                        <p>Select Option</p>
                        <Select options={icons}/>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Board