Найти баг в компоненте колорпикера

Тут либо есть баг, либо что-то не так с кодом.


/////////////////////////////////
const ColorPicker = () => {
    const [selectedColor, setSelectedColor] = useState(''); // Состояние для выбранного цвета
    const [color, setColor] = useState(''); // Состояние для отображаемого цвета

    const handleColorChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        setSelectedColor(event.target.value);
    };

    useEffect(() => {
        setColor(selectedColor);
    }, [selectedColor]);

    return (
        <div style={{ marginBottom: 50 }}>
            <select onChange={handleColorChange} value={selectedColor}>
                <option value="">Выберите цвет</option>
                <option value="red">Красный</option>
                <option value="green">Зеленый</option>
                <option value="blue">Синий</option>
            </select>
            <h2 style={{ color }}>
                {color ? `Выбранный цвет: ${color}` : 'Цвет не выбран'}
            </h2>
            <hr />
        </div>
    );
};

Оставьте комментарий