uncheck random checkbox when selecting the 3rd one (out of 3)

i'm trying to build an annoying set of checkboxes where you can't check all the

there is a 'working' demo here:

https://potatoveloper.netlify.com

checkboxes for that i do the following:

  const [checked, setDeveloperSkill] = React.useState([false, false, false]);

set a initial state array with every checkbox at false

then:

  const toggleDeveloperSkill = (skill, i) => {
    console.log(checked)
    let checkedList = checked
    checkedList.splice(i, 1, !checked[i])
    if(checkedList.filter(checked => checked === true).length === 3) {
      checkedList.splice(checked[i-1], 1, true)
      let rand = Math.floor(Math.random() * checkedList.length)
      while(rand === i) {
        rand = Math.floor(Math.random() * checkedList.length)
      }
      checkedList.splice(checked[rand-1], 1, false)
      return setDeveloperSkill([...checkedList])
    }
    return setDeveloperSkill([...checkedList])
  }

this is a hacky solutions that works most of the time but not everytime (sometimes takes two clicks or it's too predictable in certain cenarios.

how can i modify this script so it can be easier to check the 3rd checkbox and uncheck a random on of the other two?