When i used the useState in react Js for password show and hide on icon click there are not working?

Question

import React,{useState} from "react";


function Password(){

    const [pass,setPass] = useState("password")


    const handleclick =()=>{
        setPass(("password")? "text" : "password")
    
    }
    return(
        <div>
            Password:<span style={{position:"relative"}}><input type={pass} name="" id="" />
            <i onClick={handleclick} style={{position:"absolute", top:"6px" , right:"5px"}} class="fa-solid fa-eye"></i></span>
        </div>
    )
}

export default Password;

When i used the useState in react Js for password show and hide on icon click there are not working. I only show the password show once time but i need to show and hide it whenever click the icon

Answer 1

import React,{useState} from "react";

function Password(){
    const [pass,setPass] = useState(true);
    return(
        <div>
            Password:
            <span style={{position:"relative"}}>
                // input
                <input type={pass?'password':'text'} name="" id="" />
                //icon
                <i onClick={()=>setPass(!pass)} 
                style={{position:"absolute", top:"6px" , right:"5px"}} 
                className="fa-solid fa-eye"></i>
            </span>
        </div>
    )
}
export default Password;