React-Phone-Input-2 customize border of input on focus

I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option. Here is the code so far:

....
            <PhoneInput
                country={'pt'}
                localization={pt}
                specialLabel={field.label}
                value={phoneValue}
                onChange={phone => setPhoneValue(phone)}
                inputStyle={{
                    '&:focus': {
                        borderColor: 'red'
                    }
                }}
            />

Sample:

Thanks!

You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following

borderClass: {
    "&.react-tel-input .form-control:focus": {
       borderColor: "#69e781",
       boxShadow: "0px 0px 0px 1px #69e781",  
    }
}    

then use this class as follows

<PhoneInput      
  containerClass={classes.borderClass}
  .
  .
/>

or if you use a CSS file you can override the rule below in your CSS file

.react-tel-input .form-control:focus: