How to make a Step active?

I am making a simple react application and included react-stepper-horizontal library and things are fine.

Working Example:

Appropriate Code related to stepper:

const Form = () => {
.
.
.

const [currentPage, setCurrentPage] = useState(1);
const sections = [
  { title: 'Basic Details', onClick: () => setCurrentPage(1) },
  { title: 'Employment Details', onClick: () => setCurrentPage(2) },
  { title: 'Review', onClick: () => setCurrentPage(3) },
];
    
<Stepper
  steps={sections}
  activeStep={currentPage}
  activeColor="red"
  defaultBarColor="red"
  completeColor="green"
  completeBarColor="green"
/>

.
.
.
}

Steps to reproduce issue:

-> There are totally three steps 1,2,3 and each have different sections as Basic Details, Employment Details and Review respectively.

-> Now if user enter any of the input field in Step 1 and goes to Step 2 and fill some input fields there and goes to Step 3 to review it and if he comes back to the Step 1 again then the active state is lost in Step 3.

-> So now issue is if we want to go to step 3 then we need to again go three steps to reach last Step 3.

Requirement:

-> If user once visited any step then if he comes to any previous step then all the steps that he visited previously needs to be in active.

Eg:

-> If user landed in Step 1, then using next button , he reaches the Step 3 and if he wish to come back to Step 1 to modify some inputs and again if he wants to go to Step 3 for review step then it should be possible by clicking on the Step 3 because he already visited that step.

Kindly help me to achieve the result of making the steps in active state upto which the user visits.. If user visits Step 3 and goes back to step 1 on click of the Step 1 circle then there should be possibility to come back to Step 3 again as he already visited the Step 3..

Any solution without any library also welcomed.

This is a big issue if we have more steps (eg 7 steps). So please kindly help me.. A big thanks in advance..

from How to make a Step active?