Problème google places autocomplete sur modal

Bonjour @tous,

J'arrive pas à afficher dans le champ adresse de mon formulaire sur modal popup, le google places autocomplete.
Voici mon code :

#Lien Google Map
<script src="https://maps.googleapis.com/maps/api/js?key=MaCleAPI&libraries=places&callback=initAutocomplete" async defer></script>
#End Lien 

#Twig
<div class="modal-header">
       <h5 class="modal-title" id="addCollaboratorModalLabel">Ajouter un collaborateur</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal fade" id="addCollaboratorModal" tabindex="-1" aria-labelledby="addCollaboratorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg"> 
            <div class="modal-content"> 
                <div class="modal-header">
                    <h5 class="modal-title" id="addCollaboratorModalLabel">Ajouter un collaborateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {{ form_start(form1) }}
                <div class="modal-body">
                        <div class="row">
                                <div class="col-12 col-sm-6 mb-1">
                                    {{ form_row(form1.address) }}
                                </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <i class="fas fa-times me-25"></i>
                        <span>Annuler</span>
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check me-25"></i>
                        <span>Valider</span>
                    </button>
            </div> 
            {{ form_end(form1 , {'render_rest': false}) }}
 </div>
#End Twig

#FormType
->add('address', TextType::class, [
      'label' => 'Adresse',
      'label_attr' => [
          'class' => 'form-label'
      ],
      'constraints' => [
          new NotBlank([
              'message' => 'Ce champ est obligatoire !',
          ]),
          new Length([
              'min' => 3,
              'minMessage' => 'L\'adresse doit avoir au moins {{ limit }} caractères.',
          ]),
      ],
      'attr' => [
          'class' => 'form-control pac-target-input',
          'placeholder' => 'Choisissez l\'adresse',
          'minlength' => 3,
          'autocomplete' => 'off',
          'data-autocomplete' => 'google-collaborateur'
      ],
      'required' => true
  ])
#End FormType

#JS
<script type="text/javascript">
    var addressFields = document.querySelectorAll('[data-autocomplete="google-collaborateur"]');

    addressFields.forEach(function (addressField) {
        var autocomplete = new google.maps.places.Autocomplete(addressField, { types: ['geocode'] });

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();

            if (place.formatted_address) {
                addressField.value = place.formatted_address;
            } 

            document.querySelector('[name="sg_collaborator_add[postalCode]"]').value = place.address_components.find(c => c.types.includes('postal_code'))?.long_name || '';
            document.querySelector('[name="sg_collaborator_add[city]"]').value = place.address_components.find(c => c.types.includes('locality'))?.long_name || '';
        });
    });
</script>
#END JS

NB: Mon code ça marche si je n'affiche pas le google place automplete dans l'autres champ de formulaire qui n'est pas dans un modal popup.

Merci d'avance !