How to mark if question is complete vs incomplete based on the page index

I have a form with 11 questions. Im trying to build a progress bar that updates an array of objects for each question and flags whether its complete or incomplete. I only want it to be complete if they click next. If they click back it should mark as incomplete. For example: If i’m on question 1, it should be incomplete, when I go to question 2 it becomes complete and so on. Same thing for going back. If im on question 3 it should be incomplete, if I go back to question 2, question 2 should mark as incomplete.

My code kinda works although for some reason if I click next, next, back I have to click back twice for it to properly update.

here is the code:

   const [currentPage, setCurrentPage] = useState(0);

    const [progress, setProgress] = useState([
        { pageIndex: 0, completed: false },
        { pageIndex: 1, completed: false },
        { pageIndex: 2, completed: false },
        { pageIndex: 3, completed: false },
        { pageIndex: 4, completed: false },
        { pageIndex: 5, completed: false },
        { pageIndex: 6, completed: false },
        { pageIndex: 7, completed: false },
        { pageIndex: 8, completed: false },
        { pageIndex: 9, completed: false },
        { pageIndex: 10, completed: false },
    ]);

    const handleNavButtonNext = () => {
        // Mark previous page as complete
        const newProgress = [...progress];
        newProgress[currentPage].completed = true;
        setProgress(newProgress);

        // Move to next page
        setCurrentPage(currentPage + 1);

    };
    const handleNavButtonBack = () => {
        // Mark current page as incomplete
        const newProgress = [...progress];
        newProgress[currentPage].completed = false;
        setProgress(newProgress);

        // Move to previous page
        setCurrentPage(currentPage - 1);

    };

What am I doing wrong?