Не получается сделать окно авторизации/регистрации

Должно быть такое, что при нажатии на одну из кнопок: "Вход"/"Регистрация" должна меняться видимость нужного из окон

html код:

<div class="container">
    <div class="form-auth">
        <div class="sign-in-window">
            <p class="form-auth__title mini-title">Авторизация</p>
            <div class="form-auth__btns">
                <button class="btn-sing sign-in-btn reset-btn" type="button">Вход</button>
                <button class="btn-sing sign-up-btn reset-btn" type="button">Регистрация</button>
            </div>
            <form>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-name">E-mail*</label>
                    <input class="form-auth__input" type="text" name="auth-name" id="auth-name">
                </div>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-pass">Пароль*</label>
                    <input class="form-auth__input" type="text" name="auth-pass" id="auth-pass">
                </div>
            </form>
            <a href="#" class="form-auth__link forgot-pass reset-link">
                Восстановить пароль
            </a>
        
            <button class="form-auth__btn create-deal reset-btn">
                Войти
            </button>
        </div>

        <div class="sign-up-window">
            <p class="form-auth__title mini-title">Регистрация</p>
            <div class="form-auth__btns">
                <button class="btn-sing sign-in-btn reset-btn">Вход</button>
                <button class="btn-sing sign-up-btn reset-btn">Регистрация</button>
            </div>
            <form>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-in-name">Имя*</label>
                    <input class="form-auth__input" type="text" name="auth-in-name" id="auth-in-name">
                </div>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-lastname">Фамилия*</label>
                    <input class="form-auth__input" type="text" name="auth-lastname" id="auth-lastname">
                </div>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-phone">Телефон*</label>
                    <input class="form-auth__input" type="text" name="auth-phone" id="auth-phone">
                </div>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-email">E-mail*</label>
                    <input class="form-auth__input" type="text" name="auth-email" id="auth-email">
                </div>
                <div class="form-auth__group">
                    <label class="form-auth__label advantages-info" for="auth-in-pass">Пароль*</label>
                    <input class="form-auth__input" type="text" name="auth-in-pass" id="auth-in-pass">
                </div>
            </form>
            <a href="#" class="form-auth__link forgot-pass reset-link">Восстановить пароль</a>
        
            <button class="form-auth__btn create-deal reset-btn">Войти</button>
        </div>
    </div>
</div>

js:

const authInit = () => {
    const toggleAuth = document.querySelector('.sign-in-btn')
    const toggleReg = document.querySelector('.sign-up-btn')

    if (!toggleAuth) return
    if (!toggleReg) return

    const signIn = document.querySelector('.sign-in-window')
    const signUp = document.querySelector('.sign-up-window')

    const handleToggleSignIn = () => {
        signIn.classList.add('sign-in-window_active')
        signUp.classList.remove('sign-up-window_active')
    }

    const handleToggleSignUp = () => {
        signIn.classList.remove('sign-up-window_active')
        signUp.classList.add('sign-in-window_active')
    }

    toggleAuth.addEventListener('click', handleToggleSignIn)
    toggleReg.addEventListener('click', handleToggleSignUp)
}

export default authInit

Тут инициализирую:

import requestDialogInit from "./modules/dialog-window"
import authInit from "./modules/hidden-btn"

const init = () => {
    requestDialogInit()
    authInit()
}

init()

Я в js не умею, но вроде бы прописано все правильно, но при этом после нажатия на кнопку смены окна на регистрацию/авторизацию смена не происходит.

А, еще стили, тут я в js добавляю доп стиль "активного" окна:

.sign-in-window {
    padding: 24px;
    background-color: var(--bg-color);
    position: absolute;
    box-shadow: 0px 3px 8px 0px rgba(0, 17, 51, 0.08), 0px 18px 28px 0px rgba(0, 17, 51, 0.16);

    &_active {
        opacity: 1;
        pointer-events: all;
    }
}

.sign-up-window {
    padding: 24px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    background-color: var(--bg-color);
    box-shadow: 0px 3px 8px 0px rgba(0, 17, 51, 0.08), 0px 18px 28px 0px rgba(0, 17, 51, 0.16);

    &_active {
        opacity: 1;
        pointer-events: all;
    }
}