React Material UI Custom Input hide/show password - reactjs

Question

I am trying to hide/show the password when a user clicks on the eye icon, but nothing changes.The default is the password is always visible, i want it to be always hidden.
[password text input][1]
My functions look like this
const [password, setPassword] = React.useState("");
const handleClickShowPassword = () => {setShowPassword({showPassword : showPassword}) };
const handleMouseDownPassword = () => {setShowPassword({showPassword : showPassword}) };
My text input code looks like this
<CustomInput
labelText="Password"
id="pass"
value={password}
type={showPassword ? 'text' : 'password'}
formControlProps={{
fullWidth: true
}}
inputProps={{
onChange: (event) => {
const value = event.target.value;
setPassword(value)
},
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
autoComplete: "off"
}}
/>
{
password === ""?
<p style={{color:"#D0021B"}}>{passworderror}</p>
:null
}
<p style={{color:"#D0021B"}}>{passwordexist}</p>
</GridItem>
[1]: https://i.stack.imgur.com/litjB.png

Answer 1

If you are using the useState Hook, then your handler should look like this:
const handleTogglePassword = () => setShowPassword(showPassword => !showPassword);
and the IconButton should look like this:
<IconButton
aria-label="toggle password visibility"
onClick={handleTogglePassword}
>
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
I think you mixed setState for class components and the useState for functional components.
Take a look here: https://reactjs.org/docs/hooks-reference.html#usestate