JQuery addClass работает, но javascript classList.add не работает

Я пытаюсь добавить класс через javascript, но он не обновляется в моей модели DOM. Когда я использую jQuery, все работает, как и ожидалось. Проблема в том, что добавление класса svg-active не работает. item.classList.add('tab-brackground--active') работает.

Мой код jQuery -

window.addEventListener('load', function () {
    const svg = document.querySelector('svg')

    if (svg) {
        const items = document.querySelectorAll(
            '.woocommerce-grouped-product-list-item'
        )

        if (items) {
            items.forEach((item) => {
                item.addEventListener('mouseenter', (e) => {
                    item.classList.add('tab-brackground--active')
                    const text = e.target.children[0].innerText
                    jQuery(`[data-section = "${text.toLowerCase()}"]`).addClass(
                        'svg--active'
                    )
                })
            })
        }
    }
})

То же самое сделано с javascript, который не работает -

window.addEventListener('load', function () {
    const svg = document.querySelector('svg')

    if (svg) {
        const items = document.querySelectorAll(
            '.woocommerce-grouped-product-list-item'
        )

        if (items) {
            items.forEach((item) => {
                item.addEventListener('mouseenter', (e) => {
                    item.classList.add('tab-brackground--active')
                    const text = e.target.children[0].innerText
                    document.querySelector(`[data-section = "${text.toLowerCase()}"]`).classList.add(
                        'svg--active'
                    )
                })
            })
        }
    }
})

Когда я console.info свой элемент javascript, он показывает элемент с добавленным классом, но когда я иду проверять DOM, класс не добавляется.