Problem with state change using useState in if else statement - if-statement

Question

I got some issue with useState and "if else" statement. I wanted to change displayed text with a click.
When I checking if counter icrement is working, it works, but when I add setText in "if else" statement there is a problem and just doesnt work properly. Icnrement strats to work strange when clicking and change a text is just imposible. Even in console increment looks wrong. Can someone help what I am doing wrong?
let counter = 0;
const [txt, setTxt] = useState("Text1");
const handleClick = (e) => {
if (
e.target.classList.contains("fa-angle-right") || e.target.classList.contains("fa-angle-left")
) {e.target.classList.contains("fa-angle-right") ? counter++ : counter--;
if (counter === 1) {
console.log(counter);
setTxt("Text2");
} else if (counter === 2) {
console.log(counter);
setTxt("Txt3")
} else if (counter > 2) {
counter = 0;
console.log(counter);
setTxt("Text1");
} else if (counter < 0) {
counter = 2;
console.log(counter);
setTxt("Text3");
} else if (counter === 0) {
console.log(counter);
setTxt("Txt1");
}
}
};

Answer 1

Every time setTxt('...') is executed, the component is re-rendered and the function executes again, so counter gets the value of 0.
If you want to preserve the value of your counter between renders, put it as a new state ( const [counter, setCounter] = useState(0) )

Answer 2

OK, #AdriánFernándezMartínez I did that way and its close. Just after first clik, in a first "if" (if (counter === 1)) console shows 0 and i have to click twice to chage it and change Txt (but is should be 1 after setCounter(counter + 1)). Next, in a third "if" (else if (counter > 2)) console shows 3 and again I need to click twice to change Txt (after 1st click its 0 and after 2nd it become 1). Still need help.
const [counter, setCounter] = useState(0);
const [txt, setTxt] = useState("Text1");
const handleClick = (e) => {
if (
e.target.classList.contains("fa-angle-right") ||
e.target.classList.contains("fa-angle-left")
) {
e.target.classList.contains("fa-angle-right")
? setCounter(counter + 1)
: setCounter(counter + 1);
console.log(counter);
if (counter === 1) {
console.log(counter);
setTxt("Text2");
} else if (counter === 2) {
console.log(counter);
setTxt("Text3");
} else if (counter > 2) {
setCounter(0);
console.log(counter);
setTxt("Text1");
} else if (counter < 0) {
setCounter(2);
console.log(counter);
setTxt("Text3");
} else if (counter === 0) {
console.log(counter);
setTxt("Text1");
}
}
};