Select.js

import React, {useState, useEffect} from 'react';

export default function Select({
    id,
    name,
    value: initialValue,
    options = [],
    onChange,
    className = '',
    disabled = false,
    placeholder = '',
    multiple = false,
    ...props
}) {
    const [selectedValue, setSelectedValue] = useState(
        initialValue !== undefined ?
            initialValue :
            (multiple ? [] : ''),
    );

    useEffect(() => {
        if (initialValue !== undefined) {
            setSelectedValue(initialValue);
        }
    }, [initialValue, multiple]);

    const handleChange = (event) => {
        const newValue = multiple ?
            Array.from(event.target.selectedOptions, (option) => option.value) :
            event.target.value;
        setSelectedValue(newValue);

        // Call `onChange` from props, if exists
        if (onChange) {
            onChange(event);
        }
    };

    return (
        <select
            id={id}
            name={name}
            value={selectedValue}
            onChange={handleChange}
            className={className}
            disabled={disabled}
            multiple={multiple}
            {...props}
        >
            {placeholder && (
                <option value="" disabled>
                    {placeholder}
                </option>
            )}

            {options.map((option) => (
                <option
                    key={option.value}
                    value={option.value}
                    disabled={option.disabled}
                    {...option.dataAttributes}
                >
                    {option.label}
                </option>
            ))}
        </select>
    );
}