How to compare if two inputs values are the same in form validation with onChange

I have created a form validation while I'm typing in data in a functional component with hooks, everything works fine until the moment when I confirm password and go back to password. When confirm password input is already filed and I make change to the password input, it doesn't see the change and error in confirm password won't appear. I dont know how to make validation detect change in inputs and check it once again if password === confirm password.

export default function Register() {

const [error, setError] = useState({
    username: false,
    email: false,
    password: false,
    confirmPassword: false,
    consent: false

})

const handleChange = (e) => {
    let emailver = /^\S+@\S+\.\S+$/;
    let passValidation = /(?=.*[!#@$^%*])[a-zA-Z0-9!#@$%*^]{6,100}$/;

    switch (e.target.name) {
        case "username": (e.target.value.length <= 4 && e.target.value !== '')
            ? setError({ ...error, username: true })
            : setError({ ...error, username: false })
            break;

        case "email": (emailver.test(e.target.value) || e.target.value === '')
            ? setError({ ...error, email: false })
            : setError({ ...error, email: true })
            break;

        case "password": (!e.target.value.match(passValidation) && e.target.value !== '')
            ? setError({ ...error, password: true })
            : setError({ ...error, password: false })
            break;

        case "confirm-password": (e.target.value !== document.getElementsByName('password')[0].value)
            ? setError({ ...error, confirmPassword: true })
            : setError({ ...error, confirmPassword: false })
            break;

        default:
            break;

    }

}


return (
    <div>
        <div className="login">
            <h2>Register</h2>
            <div className="login-box">
                <form noValidate >

                    <input type="text" name="username" placeholder="Username" className={(error.username) ? 'error' : ''} onChange={handleChange} />
                    {(error.username) ? <span className="register-info">(Username has to be atleast 5 charaters long.)</span> : ''}

                    <input type="email" name="email" placeholder="E-mail" className={(error.email) ? 'error' : ''} onChange={handleChange} />
                    {(error.email) ? <span className="register-info">(Invalid e-mail.)</span> : ''}

                    <input type="password" name="password" placeholder="Password" className={(error.password) ? 'error' : ''} onChange={handleChange} />
                    {(error.password) ? <span className="register-info">Password should be 6 letters long and include one special character (! # @ $ %).</span> : ''}

                    <input type="password" name="confirm-password" placeholder="Confirm password" className={(error.confirmPassword) ? 'error' : ''} onChange={handleChange} />
                    {(error.confirmPassword) ? <span className="register-info">Passwords does not match</span> : ''}

                    <div className="consent">
                        <input type="checkbox" id="approval" className="approval" />
                        <label htmlFor="approval">Consent.</label>
                    </div>

                    <input type="submit" value="Register" id="reg-bt" />

                </form>
                <p><Link to="/"  className="login-link">Login</Link></p>
            </div>

        </div>
    </div>
)

}