React Select: Options not show up at first click

Question

I created a child component by react-select, but options don't show up in first click on selector. For the second time each section is clicked, the options are displayed. I tried to use the AsyncSelect but again it did not work. The Data is read from Local Storage, but I don't think there is a problem with this.

Sandbox: https://codesandbox.io/s/strange-field-4elv3?file=/src/App.js

My data from local storage:

const feauters = [
    {
        "id": 5,
        "title": "Type",
        "options": [
            {
                "id": 231040,
                "name": "cloth",
                "property": 5
            },
            {
                "id": 230081,
                "name": "Synthetic materials",
                "property": 5
            }
        ]
    },
    {
        "id": 646,
        "title": "Shoe soles",
        "options": [
            {
                "id": 231063,
                "name": "Abrasion resistant",
                "property": 646
            },
            {
                "id": 231064,
                "name": "Reduce the pressure",
                "property": 646
            }
        ]
    },
]

Parent Component:

<MultiSelect features={features} />

My Component:

import React, {useEffect, useState} from 'react';
import {Form} from 'react-bootstrap';
import Select from 'react-select';

const MultiSelect = ({features}) => {

    // Declare States
    const [selectors, setSelectors] = useState([]);

    // Handle Features
    useEffect(() => {
        const initialSelectors = features.map((item, index, array) => {
            const options = item.options.map((subItem) => {
                return {
                    value: `${subItem.property}-${subItem.id}`,
                    label: subItem.name,
                };
            });

            return (
                <React.Fragment key={`product-multiselect-${index}-${item.id}`}>
                    <Form.Label htmlFor={`product-multiselect-${index}-${item.id}`}>{item.title}</Form.Label>
                    <Select
                        id={`product-multiselect-${index}-${item.id}`}
                        className="mb-2"
                        classNamePrefix="select"
                        defaultInputValue="Select..."
                        placeholder="Select..."
                        noOptionsMessage={() => 'Not Found.'}
                        isMulti
                        isClearable
                        isRtl
                        isSearchable
                        name={item.title}
                        onChange={handleChangeInput}
                        options={options}
                    />
                </React.Fragment>
            );
        });
        setSelectors(initialSelectors);
    }, [features]);

    // Handle Change Input
    const handleChangeInput = (values) => {
        console.log(values);
    };

    return selectors;
};

export default MultiSelect;

Answer 1

First of all as mentioned in the comments you shouldn't store the component inside the state. Related question

Secondary, options don't show up because of defaultInputValue props. If you remove it, the component would work as intended