I'm trying to add aria-expanded to a button that is used to create a dropdown. The problem is that aria-expanded needs to be in true to expand the dropdown options. This component is used as normal button, too. I don't know if this is a good aproach. Because in a normal button I will have aria-expanded which is not desirable. So I'm having two problems.

Could be the problem be to have onClick and onBlur? Maybe if I use only onClick?

This is my component.

const Button = ({
    id,
    type,
    image,
    iconRight,
    label,
    href,
    to,
    bsStyle,
    secondary,
    inverse,
    small,
    expandable,
    block,
    disabled,
    loading,
    onClick,
    replace,
    defaultLabelText,
    className,
    style,
    children,
    ...props
}) => {
    const [pressed, setPressed] = useState(false);
    const [boolValue, setBoolValue] = useState(false);

    useEffect(() => {
        setPressed(boolValue);
    }, [boolValue]);

    const handleToggle = (value) => {
        setBoolValue(value);
    };

    const handleClick = (event) => {
        if (typeof onClick === "function") {
            onClick(event);
        }
    };

    const handleFocus = (event) => {
        handleToggle(true);
        if (typeof props.onFocus === "function") {
            props.onFocus(event);
        }
    };

    const handleBlur = (event) => {
        handleToggle(false);
        if (typeof props.onBlur === "function") {
            props.onBlur(event);
        }
    };

    return (
        <button
            {...(expandable && { "aria-expanded": `${pressed}`, "aria-controls": `${id}` })}
            type="button"
            onClick={handleClick}
            onFocus={expandable ? (event) => handleFocus(event) : undefined}
            onBlur={expandable ? (event) => handleBlur(event) : undefined}
            style={style}
            disabled={disabled}>
            <>
                {image && !iconRight && <Image src={image} />}
                {label && <I18n id={label} {...replace} defaultValue={defaultLabelText} />}
                {!label && defaultLabelText && <span>{defaultLabelText}</span>}

                {children}

                {image && iconRight && <Image iconRight src={image} />}
            </>
        </button>
    );
};