Unable to make PhoneInput component focusable in React

Question

I'm working on a React project and using the PhoneInput component for handling phone number inputs. However, I'm having trouble making the PhoneInput component focusable. By default, the component loses its focusable qualities when using react-hook-form's controller.

Here's the relevant code snippet:

<Controller
  type="tel"
  control={control}
  rules={{ required: true }}
  name="phone"
  render={({ field }) => (
    <PhoneInput
      international
      withCountryCallingCode
      className={`border border-opacity-20 placeholder:opacity-50 border-[#2E2B27] px-3 py-3 placeholder-[#2E2B27] text-[#2E2B27] bg-white font-opensans font-normal text-lg rounded-lg w-full ease-linear transition-all duration-150`}
      placeholder="83457 92890"
      {...field}
      defaultCountry="IN"
    />
  )}
/>

And here's the CSS code that should affect the focus behavior:

.customPhoneInput:focus {
  opacity: 0.2;
}

---

I am using 'tailwind','react-phone-number-input'

---

When I check the :focus psuedo class from the dev tools, the style is applied but when I click/press tab to bring it into focus in the UI, it doesn't work.

---

This is the rendered HTML

<div class="border border-opacity-20 border-[#2E2B27] px-3 py-3 placeholder-[#2E2B27] text-[#2E2B27] bg-white font-opensans font-normal text-lg rounded-lg w-full ease-linear transition-all duration-150 Request_customPhoneInput__aFGKP PhoneInput">
   <div class="PhoneInputCountry">
      <select name="phoneCountry" aria-label="Phone number country" class="PhoneInputCountrySelect">
         <option value="ZZ">International</option>
         <option value="AF">Afghanistan</option>
         <option value="RS">Serbia</option>
         <option value="SC">Seychelles</option>
         <option value="SL">Sierra Leone</option>
         <option value="SG">Singapore</option>
         <option value="SX">Sint Maarten</option>
         <option value="SK">Slovakia</option>
         <option value="SI">Slovenia</option>
         <option value="SB">Solomon Islands</option>
         <option value="TK">Tokelau</option>
         <option value="TN">Tunisia</option>
         <option value="TR">Turkey</option>
         <option value="TM">Turkmenistan</option>
         <option value="TC">Turks and Caicos Islands</option>
         <option value="TV">Tuvalu</option>
         <option value="UG">Uganda</option>
         <option value="UA">Ukraine</option>
         <option value="AE">United Arab Emirates</option>
         <option value="GB">United Kingdom</option>
         <option value="US">United States</option>
         <option value="UY">Uruguay</option>
         <option value="UZ">Uzbekistan</option>
         <option value="VU">Vanuatu</option>
         <option value="VE">Venezuela</option>
         <option value="VN">Vietnam</option>
         <option value="VG">Virgin Islands, British</option>
         <option value="VI">Virgin Islands, U.S.</option>
         <option value="WF">Wallis and Futuna</option>
         <option value="EH">Western Sahara</option>
         <option value="YE">Yemen</option>
         <option value="ZM">Zambia</option>
         <option value="ZW">Zimbabwe</option>
      </select>
      <div aria-hidden="true" class="PhoneInputCountryIcon PhoneInputCountryIcon--border"><img class="PhoneInputCountryIconImg" alt="India" src="https://purecatamphetamine.github.io/country-flag-icons/3x2/IN.svg"></div>
      <div class="PhoneInputCountrySelectArrow"></div>
   </div>
   <input type="tel" autocomplete="tel" placeholder="83457 92890" class="PhoneInputInput" name="phone" value="+91 2342 34">
</div>