Switch between html div class using EventListener JavaScript

So I have a simple Html page with 5 button and 5 section in it. each time i ‘click’ one of these button, a javascript function switch the active section using an EventListener.
here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
<body class="main-content">
    <header class="section sec1 header active" id="home">

    </header>
    <main>
        <section class="section sec2 about" id="about"></section>
        <section class="section sec3 portfolio" id="portfolio"></section>
        <section class="section sec4 blogs" id="blogs"></section>
        <section class="section sec5 contact" id="contact"></section>
    </main>
    <div class="controls">
        <div class="control control-1 active-btn" data-id="home">
            <i class="fa-solid fa-house"></i>
        </div>
        <div class="control control-2 " data-id="about">
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>
        <div class="control control-4 " data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>
        <div class="control control-5 " data-id="contact">
            <i class="fa-solid fa-envelope-open"></i>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

And here is my JavaScript:

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelectorAll('.main-content');

function pageTransition(){
    //Button click active class
    for(let i = 0; i < sectBtn.length; i++){
        sectBtn[i].addEventListener('click', function() {
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className += 'active-btn';
        })
    }

    //sections Active class
    allSections.addEventListener('click', (e) =>{
        const id = e.target.dataset.id;
        if(id){
            //remove selected from the other btns
            sectBtns.forEach((btn) =>{
                btn.classList.remove('active')
            })
            e.target.classList.add('active')

            //hide other sections
            sections.forEach((section) => {
                section.classList.remove('active')
            })

            const element = document.getElementById(id);
            element.classList.add('active');
        }
    })
}

pageTransition()

My problem is that my section active class is not switching between each of the section when I click the corresponding button.