So I'm doing a simple login form with a submit button. So idea is to track the failed attempts when a user tries to log in. If the user failed 5 attempts then submit button will be disabled for 30sec. So far it's pretty simple, but I'm trying to implement that button will be disabled only if those 5 attempts were during the 10sec. So I'm stacked here... Hope for your help folks!

This is what I got so far

const [login, setLogin] = useState<string>('')
const [error, setError] = useState<string>('')
const [attempts, setAttempts] = useState<number>(0)

useEffect(()=>{
    if(attempts===5){
        setTimeout(()=>{
            setAttempts(0)
        },1000)
    }
},[attempts])   

const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setLogin(e.target.value)
}

const useHandler = () => {
    setAttempts(prevState => prevState + 1)
    if (login === 'valid') {
        axios.get('https://api.github.com/users/anon').then(res => console.log(res.data))
        setError('')
        setAttempts(0)
    } else if (login !== 'valid') {
        if (attempts >= 0 && attempts < 5) {
            setError('unsuccessful login attempt')
        }
    }
}

and my return here is my return

 <div className="App">
        <div className={'loginBlock'}>
            <div>
                <input name={'login'} value={login} type="text"
                   onChange={onChangeHandler}/>
                <button disabled={attempts === 5} onClick={useHandler}>submit</button>
            </div>
            <div style={{color: 'red'}}>{error}</div>
        </div>
    </div>