Не отображается анимация наведения на ссылку у курсора

$(document).ready(function(){
    let $cursorX = 0, $cursorY = 0, $top = 0, $left = 0, $leftd = 0, $topd = 0;
// получаем координаты курсора
    $(document).mousemove(e => {
            $cursorX = e.clientX;
            $cursorY = e.clientY;
    });
// точка, находится ровно там, где и курсор
    setInterval(() =>{
        $leftd += ($cursorX - $leftd);
        $topd += ($cursorY - $topd);
        $('.dot').css({left: $leftd + 'px', top: $topd + 'px'});
    }, 1);
// окружность доходит до курсора, но замедленно
    setInterval(() =>{
        $left += ($cursorX - $left) / 10;
        $top += ($cursorY - $top) / 10;
        $('.cursor').css({left: $left + 'px', top: $top + 'px'});
    }, 6);

});
// наведение на ссылку 
for (let i = 0, linksLength = links.length ; i < linksLength ; i++) {

    links[i].addEventListener('mouseover', () => {
        dot.classList.add('active')
        cursor.classList.add('active')
    })

    links[i].addEventListener('mouseout', () => {
        dot.ClassList.Remove('active')
        cursor.classList.remove('active')
    })
}

html {
  background-color: #000000;
}

a {
  color: #fff;
}
// CURSOR

.dot{
    width: 6px;
    height: 6px;
    position: fixed;
    background-color: #ffffff;
    box-shadow: 0px 0px 25px 0px rgb(0, 0, 0);
    border-radius: 50%;
    margin: -2px 0 0 -2px;
    z-index: 9999;
    pointer-events: none;
}

.cursor{
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: fixed;
    margin: -10px 0 0 -10px;
    z-index: 9999;
    pointer-events: none;
    transform: scale(1);
    &.active {
        opacity: 0;
        transform: scale(0);
    }
}

<!-- dot - сам курсор,  cursor - окружность -->
    <div class="dot"></div>
    <div class="cursor"></div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    <a href="#">Ссылка</a>