React Drop Down with select

Question

你能建议我可以在此代码中更改什么，或者什么是验证 React Select 的好做法？

export const BaseDropDown = function ({options,label = 'apple',}) {

    const [isOpen, setIsOpen] = useState(true);
    const [selectedOption,setSelectedOption] = useState('apple')

    const handleSelectOption = (value) => {
        setSelectedOption(value)
        setIsOpen(true)
    }

    console.log(selectedOption)
    const toggleDropdown = () => setIsOpen(!isOpen)


    return (
        <label className="base-drop-down">
            <span>{label}</span>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="13.5" height="7.695" viewBox="0 0 13.5 7.695">
                    <g id="_001-arrow-down-sign-to-navigate" data-name="001-arrow-down-sign-to-navigate" opacity="0.71">
                        <path id="Path_26537" data-name="Path 26537" d="M6.751,104.836a.943.943,0,0,0,.668-.277l5.8-5.8a.945.945,0,0,0-1.337-1.337l-5.136,5.136L1.615,97.418A.945.945,0,0,0,.278,98.755l5.8,5.8A.943.943,0,0,0,6.751,104.836Z" transform="translate(-0.001 -97.141)" fill="#463518"/>
                    </g>
                </svg>
            </i>
            <div onClick={toggleDropdown}>{selectedOption}</div>
            <ul className={`${isOpen ? 'hidden' : ''}`}>
                {options.map(({option,id}) => {
                        return(
                            <li key={id}
                                onClick={(ev) => handleSelectOption(option)}>{option}</li>
                            )
                    })}
                </ul>
        </label>
    )
}

我试图从这个下拉列表中获取值并且我成功了，但我的印象是这不是一个很好的做法。