[GREEN] implement stepper after using mock

src/components/Stepper/Stepper.js

 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Stepper = ({currentPage, setCurrentPage}) => {
+const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
   return (
     <div className="flex flex-row justify-between items-center px-12 lg:px-48 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-28 pb-14">
       <div
         className="flex flex-col justify-center items-center pt-1 relative"
         data-testid="step-1"
       >
-        <button
-          className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <input
+            name="page"
+            type="submit"
+            value="1"
+            ref={register({})}
+            className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
                       ${
                         currentPage == 1
                           ? `bg-white text-darkblue`
                           : `bg-darkblue text-white`
                       }`}
-          data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
-          onClick={() => setCurrentPage(1)}
-        >
-          1
-        </button>
+            data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
+            onClick={() => {
+              setValue('page', '1')
+            }}
+          ></input>
+        </form>
         <p className="small-text text-darkblue text-center font-bold absolute top-12">
           Profile <br></br> Perusahaan
         </p>
@@ -36,8 +42,13 @@ const Stepper = ({currentPage, setCurrentPage}) => {
         className="flex flex-col justify-center items-center pt-1 relative"
         data-testid="step-2"
       >
-        <button
-          className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <input
+            name="page"
+            type="submit"
+            value="2"
+            ref={register({})}
+            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
                         ${
                           currentPage == 1 &&
                           `bg-gray-200 text-gray-400 border-gray-200`
@@ -50,17 +61,18 @@ const Stepper = ({currentPage, setCurrentPage}) => {
                           currentPage == 3 &&
                           `bg-darkblue text-white border-darkblue`
                         }`}
-          data-testid={`${
-            currentPage == 1
-              ? `step-2-gray`
-              : currentPage == 2
-              ? `step-2-white`
-              : `step-2-blue`
-          }`}
-          onClick={() => setCurrentPage(2)}
-        >
-          2
-        </button>
+            data-testid={`${
+              currentPage == 1
+                ? `step-2-gray`
+                : currentPage == 2
+                ? `step-2-white`
+                : `step-2-blue`
+            }`}
+            onClick={() => {
+              setValue('page', '2')
+            }}
+          ></input>
+        </form>
         <p
           className={`small-text text-gray-400 text-center font-bold absolute top-12
                         ${
@@ -82,18 +94,24 @@ const Stepper = ({currentPage, setCurrentPage}) => {
         className="flex flex-col justify-center items-center pt-1 relative"
         data-testid="step-3"
       >
-        <button
-          className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <input
+            name="page"
+            type="submit"
+            value="3"
+            className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
                         ${
                           currentPage == 3
                             ? `bg-white text-darkblue border-darkblue`
                             : `bg-gray-200 text-gray-400 border-gray-200`
                         }`}
-          data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
-          onClick={() => setCurrentPage(3)}
-        >
-          3
-        </button>
+            data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
+            onClick={() => {
+              setValue('page', '3')
+            }}
+            ref={register({})}
+          ></input>
+        </form>
         <p
           className={`small-text text-center font-bold absolute top-12
                         ${
@@ -109,7 +127,10 @@ const Stepper = ({currentPage, setCurrentPage}) => {
 
 Stepper.propTypes = {
   currentPage: PropTypes.number,
-  setCurrentPage: PropTypes.func,
+  onSubmit: PropTypes.func,
+  register: PropTypes.func,
+  handleSubmit: PropTypes.func,
+  setValue: PropTypes.func,
 }
 
 export default Stepper