Problème de sélection de la bonne <div>

Bonjour tout le monde,
J suis en apprentissage dans le dev et actuellement je travaille sur un formulaire avec symfony et je fais maintenant de la validation client side.

voici un exemple d'un de mes champs :

                    <div class="col-md control-form">
                                <div class="mb-3">
                                            <label for="register_firstname" class="form-label required">Prénom</label>
                                            <input type="text" id="register_firstname" name="register[firstname]" 
                                             required="required" placeholder="Saisissez votre Prénom" class="form-control">
                                </div>
                                  <i class="fas fa-check-circle"></i>
                                  <i class="fas fa-exclamation-circle"></i>
                                  <small></small>
                    </div>

J'ai créé une fonction qui permet de ajouter une class a une div s'il y a une erreur de remplissage, et d'ajouter un message d'erreur dans la balise <small>

la voici :

function setErrorFor(input, message)
{
    const ControlForm = input.parentElement;
    const small = ControlForm.querySelector('small');
    small.innerText = message;
    ControlForm.className = 'control-form error';
} 

le problème que je rencontre actuellement est que la modification de class ne se fait pas dans la bonne div, je voulais qu'elle s'applique sur la div "col-md control-form" or, elle se fait sur la div "mb-3", une div créée automatiquement par symfony lors de la génération du formulaire.
Je sais que je doit modifier le contenu de ma const ControlForm pour viser la div que je désire cependant mes connaissances en JS sont tres limitées... Auriez vous une idée pour mon probleme?
Merci d'avance et bonne journée :)