Moving between pages using arrows

Hello, could someone help doing this part of the code, I’m trying to navigate between thre different url with arrows within the pages, tried to add the url in a index then create a var currentPage with the value 1 “the first page when entering the site” then create a function called NavigateZone with a parameter then in the function if the the received parameter equals to right the currentIndex plus 1 meaning the page in the right would be the index of 2 in the index I created same with the left with the difference of using minus, meaning the the page in the left would be the index 0, then change the page to the url page with the current index, but the problem is after I press to go to the left or right if I want to go back to in-between I doesnt go, it goes straight up from 0 to 2 after choosing to go left then trying to go right. I don’t if I explained right it right

[html]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./scripts.js"></script>
    <link rel="stylesheet" href="./styles.css">
    <title>CounterZone</title>
</head>
<body onload="init();">
    <header>
        <div class="top-bar">
            <div id="Logo">
                <img id="LogoImg" src="./img/LOGO.SVG" alt="logo">
            </div>
            <div class="coins-indicator">
                <span id="coin-count">0</span>
                <img id="CoinIcon" src="./img/coins.png" alt="coin icon" onclick="ola();">
            </div>
            <div id="Profile">
                <span id="UserName"></span>
                <img id="ProfileIcon" src="./img/ProfileIcon.png" alt="icon">
            </div>
        </div>
    </header>
    <main> 
        <img id="leftArrow" src="./img/leftArrow.png" alt="Left Arrow" onclick="navigateZone('left');">
        <div id="inDoorShop">
            
        </div>
        <img id="rightArrow" src="./img/rightArrow.svg" alt="Right Arrow" onclick="navigateZone('right');">
    </main>
</body>
</html>

[javascript]


// dicionario de informações do usuario
let userInfo = {
    username: "Joao",
    password: "12345678",
    coins: 50
};

let zoneURLs = [
    "AlimentationZone.html",
    "CounterZone.html",
    "PetsZone.html"
];

let currentIndex = 1;

function init(){
    
    //guardo as moedas do usuario na chave "userCoins"
    let storedCoins = localStorage.getItem('userCoins');
    let loggedUser = localStorage.getItem('userName');
    
    // se o valor na variavel stored coins não for igual a null, atualiza as coins no dicionario userInfo com o valor 
    // guardado na variavel storedCoins.
    if (storedCoins !== null) {
        //parseInt transforma o valor guardado no localStorage para int
        userInfo.coins = parseInt(storedCoins, 10);
    }
    
    if (loggedUser !== null){
        userInfo.username = loggedUser;
    }
    
    //chamo a função setPlayerCoins para atualizar a pagina com as moedas guardadas no local storage
    setPlayerCoins();
    setPlayerInformation();
}


//função para verificar o user para fazer login na pagina
function verifyUser(){

    //impede que a pagina por default quando é clicado no botao submit ir para o URL no atributo action do formulario,
    // me habilitando controlar o que acontece quando o botao submit é clicado
    event.preventDefault();

    //guardo em variaveis os valores do formulario
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    
    // comparo os valores do formulario com as do userData
    if(username === userInfo.username && password === userInfo.password){
        //Redireciona para pagina do jogo
        window.location.href = "CounterZone.html";
    }
    else {
        //popup de erro de login
        alert("Invalid username or password");
    }

}


//função para atualizar a quantidade de moedas que o jogador tem na pagina
function setPlayerCoins() {
    //adiciona o valor na pagina com o valor no userInfo
    let coins = document.getElementById("coin-count").textContent = userInfo.coins;

    //guardo na chave userCoins o valor atualizado
    localStorage.setItem('userCoins', coins);
}

function setPlayerInformation(){
    let username = document.getElementById("UserName").textContent = userInfo.username;
    
    localStorage.setItem('userName', username);
}

function navigateZone(direction){

    if (direction === 'left') {
        currentIndex -= 1;
    } else if (direction === 'right') {
        currentIndex += 1;
    }
    
    
    window.location.href = zoneURLs[currentIndex];
}


function ola(){
    userInfo.coins += 1;
    setPlayerCoins();
    
}

I think the problem is when the page changes to another the currentIndex changes to 1, but still tried to solve but couldn’t