password field update 🎲

src/Pages/Onboarding/WelcomeToOptifii.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import WelcomeFrame from './WelcomeFrame'
 import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container } from '@chakra-ui/react';
 import { FaEye, FaEyeSlash } from 'react-icons/fa';
 import PrimaryButton from '../../Components/Buttons/PrimaryButton'
 
 const WelcomeToOptifii = () => {
-    const [showPassword, setShowPassword] = React.useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
     const handlePasswordVisibility = () => setShowPassword(!showPassword);
 
     return (
@@ -196,7 +197,7 @@ const WelcomeToOptifii = () => {
                                                 fontSize="xs"
                                                 fontWeight={500}
                                                 pr="4.5rem"
-                                                type={showPassword ? 'text' : 'password'}
+                                                type={showConfirmPassword ? 'text' : 'password'}
                                                 placeholder="Confirm password"
                                             />
                                             <InputRightElement width="4.5rem">
@@ -206,8 +207,8 @@ const WelcomeToOptifii = () => {
                                                     bg={"transparent"}
                                                     _hover={{ opacity: 0.7 }}
 
-                                                    onClick={handlePasswordVisibility}>
-                                                    {showPassword ? <FaEyeSlash /> : <FaEye />}
+                                                    onClick={()=>setShowConfirmPassword(!showConfirmPassword)}>
+                                                    {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
                                                 </Button>
                                             </InputRightElement>
                                         </InputGroup>