limit to three the amount of checkbox selected

I have a code that it is half working. because after selecting 3 options its not getting disabled the 2 left but is disabling the 5 of them, so there is no chance to unselected them later.

also there’re the following errors in the console when selecting the first one:

unchecked[i].setAttribute is not a function

how can I fix it, so when selecting 3 options, the ones selected don’t get disabled too?

 const handleChange = () => {
    let checked = document.querySelectorAll('input[type=checkbox]:checked')
    let unchecked = document.querySelectorAll('input[type=checkbox]')


     if(checked.length < 3)  {
         for(let i in unchecked){
         unchecked[i].removeAttribute('disabled')
      }
    } else {
        for(let i in unchecked){
        unchecked[i].setAttribute('disabled', 'disabled')
    }
        for(let i in checked){
        checked[i].removeAttribute('disabled')
    }
  }


  <form onSubmit={handleSubmit}>

    <label htmlFor="bike">Bike</label>
    <input type="checkbox" name='bike' value="bike" onChange={handleChange}/> 

    <label htmlFor="car">Car</label>
    <input type="checkbox"  name='car' value="car" onChange={handleChange}/>

    <label htmlFor="truck">Truck</label>
    <input type="checkbox"  name='truck' value="truck"onChange={handleChange}/>

    <label htmlFor="patin">Patin</label>
    <input type="checkbox"  name='patin' value="patin"onChange={handleChange}/>

    <label htmlFor="skate">Skate</label>
    <input type="checkbox" name='skate' value="skate" onChange={handleChange}/>

    <button type='submit'>continue</button>
  </form>