How do I display the placeholder for the phone number using intl-tel-input

Question

I'm trying to display the formatted country code in the input placeholder, but it only shows the country code

<input type="tel" name="celular" class="form-control input-telefone" 
       placeholder="<?php echo site_phrase('celular'); ?>"
       aria-label="<?php echo site_phrase('celular'); ?>"
       aria-describedby="selected-country-code" id="celular" required 
       style="border-top-left-radius: 0px;padding-left: 60px;border-bottom-left-radius: 0px;">

I have tried using the formatNumber and getNumber methods, but none of them returns the example number; only the getNumber method returns '-99' for all selected countries.

$(document).ready(function () {
  const input = document.getElementById("celular"); // Usando document.getElementById em vez de $("#celular")
  const iti = intlTelInput(input, {
    initialCountry: "br",
    placeholderNumberType: "MOBILE",
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js",
  });

   input.addEventListener("countrychange", function (event) {
        const countryData = iti.getSelectedCountryData();
        const numberType = iti.getNumberType();

        input.placeholder = "+" + countryData.dialCode + " " + iti.getNumberType();
        $("#selected-country-code").text("+" + countryData.dialCode);
    });

    input.addEventListener("input", function (event) {
        // Realize qualquer formatação adicional, se necessário
    });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.min.css">

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput-jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js"></script>

How to display in the placeholder