I can't override the border-radius value to 0.

I have been trying to set the border-radius to 0 but could not. I want to remove the rounded corners.
Please help. Thanks!

below is the code I am using. I tried borderRadius: "0 !mportant" and seems not working. :(

export const customStyle = {
    placeholder: (base) => ({
        ...base,
        color: "#999999",
        fontWeight: 400
    }),
    noOptionsMessage : base => ({...base, ...msgStyles}),
    dropdownIndicator: (base) => ({
        ...base,
        color        : "#666666",
        paddingTop   : 0,
        paddingBottom: 0,
        paddingLeft  : 0,
        paddingRight : 8
    }),
    option           : (base, {isSelected}) => ({
        ...base,
        borderTop  : `1px solid #CCCCCC`,
        borderLeft : `1px solid #CCCCCC`,
        borderRight: `1px solid #CCCCCC`,
        "&:hover"  : {
            borderColor: "#CCCCCC",
            background : "#0087FB",
            color      : "#FFFFFF",
            cursor: "pointer"
        },
        fontWeight : 400,
        background : isSelected ? "#0087FB" : "#FFFFFF",
        margin     : 0,
        padding    : 10,
        fontSize: 12
    }),
    menu             : (provided) => ({
        ...provided,
        border      : "none",
        borderBottom: `1px solid #CCCCCC`,
        margin      : 0,
        padding     : 0,
        boxShadow: "4px 4px 4px #999999",
        zIndex: 1
    }),
    menuList         : (provided) => ({
        ...provided,
        paddingTop   : 0,
        paddingBottom: 0,
        boxShadow    : "none",
        borderTop    : "none"
    }),
    control          : (base, {isDisabled, isFocused}) => ({
        ...base,
        borderRadius: 0,
        border      : `1px solid ${isFocused ? "#00B2E2" : "#CCCCCC"}`,
        "&:hover"   : {
            borderColor: isFocused ? "#00B2E2" : "#CCCCCC",
            cursor: "pointer"
        },
        minHeight   : 32,
        fontWeight  : 400,
        background  : isDisabled ? "#EBEBEB": "#FFFFFF",
        marginTop   : 1,
        boxShadow   : 0,
        fontSize: 12,
    }),
    singleValue: (styles, { isDisabled }) => ({ 
        ...styles, 
        color: isDisabled ? "#CCCCCC": "#333333"
    }),
};

Start by reproducing the issue with the supplied customStyle object, focusing on the control style callback and its borderRadius value. Compare the rendered control with the requested square-corner result and verify the behavior in a minimal React Select example; done means border-radius: 0 is visibly applied.