I wanted to add the password field for authentication while Signing up but the label of the password field is not aligned properly as shown in the image
<div className="register">
<h2>
<OfflineBoltRoundedIcon
sx={{ fontSize: '3.5rem', position: 'relative', top: '1rem' }}
/>
Electrify
</h2>
<h1>Sign up with your email address</h1>
<FormControl sx={{ m: 1, width: '20rem' }} variant="outlined">
<p>What's your email?</p>
<TextField
id="email"
label="Email"
variant="outlined"
color="secondary"
name="email"
fullWidth
/>
<p>Create a password</p>
<InputLabel htmlFor="outlined-adornment-password" color="secondary">
Password
</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
color="secondary"
aria-describedby="outlined-password-helper-text"
/>
<FormHelperText id="outlined-password-helper-text">
Enter a 6 digit password
</FormHelperText>
</FormControl>
</div>
