В react у компонента из ниоткуда появился className={active}, убрать его не получается

В ссылке реакт className задается в зависимости от состояния burgerActive, либо "logo active", либо "logo", но когда я запускаю код в лайвсервере, почему то именно у NavLink появляется лишний класс active (вне зависимости от burgerActive). Не понимаю откуда он взялся, пробовал даже просто присвоить className="", но active все равно остается на NavLink'е.

<NavLink
  to={USERS_ROUTE}
  className={burgerActive ? "logo active" : "logo"}
  onClick={() => { setBurgerActive(false) }}>
  USERS
</NavLink>

вот весь компонент:

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { USERS_ROUTE, LOGIN_ROUTE, REGISTRATION_ROUTE } from './../utils/consts';

const NavBar = () => {
    const [burgerActive, setBurgerActive] = useState(false)

    return (
        <header>
            <div className={burgerActive ? "burger active" : "burger"} onClick={() => {
                setBurgerActive(!burgerActive)
            }}>
                <span className={burgerActive ? "active" : ""}></span>
            </div>

            <div className="header">
                <NavLink
                    to={USERS_ROUTE}
                    className={burgerActive ? "logo active" : "logo"}
                    onClick={() => { setBurgerActive(false) }}>
                    USERS
                </NavLink>
                <div className={burgerActive ? "main-header active" : "main-header"}>
                    <nav className={burgerActive ? "nav active" : "nav"}>
                        <NavLink
                            to={LOGIN_ROUTE}
                            className={burgerActive ? "nav__item nav__link active" : "nav__item nav__link"}
                            onClick={() => { setBurgerActive(false) }}>
                            LOGIN
                        </NavLink>
                        <NavLink
                            to={REGISTRATION_ROUTE}
                            className={burgerActive ? "nav__item nav__link active" : "nav__item nav__link"}
                            onClick={() => { setBurgerActive(false) }}>
                            REGISTRATION
                        </NavLink>
                    </nav>
                </div>
            </div>
        </header >
    )
}

export default NavBar

Вот скриншот класса при burgerActive=false(должно быть "logo"): введите сюда описание изображения Когда burgerActive=true, то получается так: введите сюда описание изображения

Не знаю, откуда мог взяться этот класс, и как его убрать..


Ответы (1 шт):

Автор решения: dv_alexandr

2й active по умолчанию у NavLink стоит

→ Ссылка