Эффект мигания при добавлении и удалении css на фокусе ввода

Question

У меня есть форма, которая использует SVG в качестве фона. Прямо над svg находятся несколько компонентов со всеми входами. Вот мой шаблон AppComponent:

<div class="myForm">
    <div id="svg">
        <app-svg></app-svg>
    </div>
    <div  id="sender"
          (mouseenter)="mouseenter()"
          (mouseleave)="mouseleave()" 
          (click)="appSender.focusFirst()"> 

        <app-sender #appSender [myForm]="myForm"></app-sender>
    </div>
</div>

А вот блиц с примером кода:

https://stackblitz.com/edit/angular-yc7ntn

Когда я наведите курсор мыши на div или фокус на входе внутри этого div, относительное поле svg под входом, должно соответственно иметь стиль css. Я использовал свойства mouseenter и mouseleave следующим образом:

constructor(
      @Inject(DOCUMENT) document
){}

mouseenter(){
    document.getElementById('svgSender').classList.add("active");
}
mouseleave(){
    document.getElementById('svgSender').classList.remove("active");
}

добавление и удаление класса в соответствующей группе svg с идентификатором 'svgSender'. Когда вход внутри компонента-отправителя получает фокус, я делаю то же самое.

Проблема: Когда я перемещаюсь по входам, потому что первый вход удаляет класс, а следующий добавляет его снова Я получаю мигающий эффект (см. Блиц выше).

Если у кого-то есть решение по любому из вышеперечисленных или есть лучший подход для достижения этой функциональности, пожалуйста, советуйте ...