Typescript 当我点击外部按钮时，如何打开Html Select 选项菜单

我正在开发一个Reaction网站，我试图根据我自己的图设计定制 Select 选项.

enter image description here个

这是我的Figma设计，我是这样做的:

const CustomDatePicker = ({ birthdate, handle }) => {
    const selectRef = useRef(null);

    const [month, setMonth] = useState('0');
    const [day, setDay] = useState('0');
    const [year, setYear] = useState('0');

    const months = [
        { value: '01', label: 'January' },
        { value: '02', label: 'February' },
        { value: '03', label: 'March' },
        { value: '04', label: 'April' },
        { value: '05', label: 'May' },
        { value: '06', label: 'June' },
        { value: '07', label: 'July' },
        { value: '08', label: 'August' },
        { value: '09', label: 'September' },
        { value: '10', label: 'Octorber' },
        { value: '11', label: 'November' },
        { value: '12', label: 'December' },
    ];

    const days = Array.from({ length: 31 }, (_, i) => i + 1).map((day) => ({
        value: day < 10 ? `0${day}` : `${day}`,
        label: day.toString(),
    }));

    const years = Array.from({ length: 125 }, (_, i) => 2024 - i).map((year) => ({
        value: year.toString(),
        label: year.toString(),
    }));

    const handleMonthChange = (event: any) => {
        setMonth(event.target.value);
        handle({ ...birthdate, month: parseInt(event.target.value) });
    };

    const handleDayChange = (event: any) => {
        setDay(event.target.value);
        handle({ ...birthdate, day: parseInt(event.target.value) });
    };

    const handleYearChange = (event: any) => {
        setYear(event.target.value);
        handle({ ...birthdate, year: parseInt(event.target.value) });
    };

    const handleIconClick = () => {
        // Trigger click event on select element
        selectRef.current.click();
    };

    return (
        <div style={{ display: 'flex', gap: '8px' }}>
            <div style={{ flex: 1, position: 'relative' }}>
                <select ref={selectRef} value={month} onChange={handleMonthChange} className={month == '0' ? styles.date_selector_placeholder : styles.date_selector}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Month</option>
                    {months.map((month) => (
                        <option key={month.value} value={month.value} className={styles.date_selector_option_item}>
                            {month.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
            <div style={{ flex: 0.5, position: 'relative' }}>
                <select value={day} onChange={handleDayChange} className={day == '0' ? styles.date_selector_placeholder : styles.date_selector} style={{ flex: 0.5 }}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Day</option>
                    {days.map((day) => (
                        <option key={day.value} value={day.value} className={styles.date_selector_option_item}>
                            {day.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
            <div style={{ flex: 0.5, position: 'relative' }}>
                <select value={year} onChange={handleYearChange} className={year == '0' ? styles.date_selector_placeholder : styles.date_selector} style={{ flex: 0.5 }}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Year</option>
                    {years.map((year) => (
                        <option key={year.value} value={year.value} className={styles.date_selector_option_item}>
                            {year.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
        </div>
    );
};

正如您所看到的，当我单击CustomIcon时，我想打开 Select 选项菜单，但它不起作用.我试图找到解决办法，但目前还没有结果.请帮帮我，谢谢大家.

为了解决这个问题，我使用了useRef，但它没有工作.还有其他方法吗？